---
import { type CollectionEntry } from 'astro:content';
import ArrowRight from '../icons/ArrowRight.astro';

type Props = { project: CollectionEntry<'projects'>; class?: string; headingLevel?: 'h2' | 'h3' };

const { project, class: className, headingLevel = 'h2' } = Astro.props;
const { title, description } = project.data;
const TitleTag = headingLevel;
---

<a class:list={['flex justify-between items-start gap-8 group', className]} href={`/projects/${project.id}/`}>
    <div class="grow">
        <TitleTag
            class="text-xl leading-tight font-serif font-medium group-hover:underline group-hover:decoration-dashed group-hover:underline-offset-4 group-hover:decoration-1 sm:text-2xl"
        >
            {title}
        </TitleTag>
        {description && <div class="mt-1 text-sm leading-normal">{description}</div>}
    </div>
    <div class="hidden font-serif italic opacity-0 transition group-hover:opacity-100 sm:inline-flex sm:gap-1 sm:items-center sm:shrink-0">
        View Project <ArrowRight class="fill-current w-4 h-4" />
    </div>
</a>
