---
import { Separator } from '@/components/ui/separator'
import { formatDate, readingTime } from '@/lib/utils'
import { Image } from 'astro:assets'
import type { CollectionEntry } from 'astro:content'
import Link from './Link.astro'

type Props = {
  entry: CollectionEntry<'blog'>
}

const { entry } = Astro.props as {
  entry: CollectionEntry<'blog'>
}

const formattedDate = formatDate(entry.data.date)
const readTime = readingTime(entry.body!)
---

<div
  class="not-prose hover:bg-secondary/50 rounded-xl border p-4 transition-colors duration-300 ease-in-out"
>
  <Link href={`/blog/${entry.id}`} class="flex flex-col gap-4 sm:flex-row">
    {
      entry.data.image && (
        <div class="max-w-[200px] sm:flex-shrink-0">
          <Image
            src={entry.data.image}
            alt={entry.data.title}
            width={1200}
            height={630}
            class="object-cover"
          />
        </div>
      )
    }
    <div class="flex-grow">
      <h3 class="mb-1 text-lg font-semibold">
        {entry.data.title}
      </h3>
      <p class="text-muted-foreground mb-2 text-sm">
        {entry.data.description}
      </p>
      <div
        class="text-muted-foreground mb-2 flex flex-wrap items-center gap-x-2 text-xs"
      >
        <span>{formattedDate}</span>
        <Separator orientation="vertical" className="h-4" />
        <span>{readTime}</span>
      </div>
    </div>
  </Link>
</div>