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

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

const { post, class: className, headingLevel = 'h2' } = Astro.props;
const { title, publishDate, updatedDate, excerpt } = post.data;
const TitleTag = headingLevel;
---

<a class:list={['flex justify-between items-start gap-8 group', className]} href={`/blog/${post.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>
        <div class="mt-1 text-sm leading-normal">
            <FormattedDate date={publishDate} />
            {
                updatedDate && (
                    <>
                        {' '}
                        <span>
                            (Updated on <FormattedDate date={updatedDate} />)
                        </span>
                    </>
                )
            }
        </div>
        {excerpt && <div class="mt-3 text-sm leading-normal">{excerpt}</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">
        Read Post <ArrowRight class="fill-current w-4 h-4" />
    </div>
</a>
