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

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

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

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

let author = null
if (
  entry.data.author &&
  typeof entry.data.author === 'object' &&
  'collection' in entry.data.author
) {
  author = await getEntry(entry.data.author)
} else if (typeof entry.data.author === 'string') {
  author = {
    data: {
      name: entry.data.author,
      avatar: '/favicons/android-chrome-512x512.png',
    },
  }
}
---

<div
  class="not-prose rounded-xl border p-4 transition-colors duration-300 ease-in-out hover:bg-secondary/50"
>
  <Link
    href={`/${entry.collection}/${entry.slug}`}
    class="flex flex-wrap gap-4"
  >
    {
      entry.data.image && (
        <div class="flex-shrink-0">
          <Image
            src={entry.data.image}
            alt={entry.data.title}
            width={200}
            height={200}
            class="rounded-xl object-cover"
          />
        </div>
      )
    }
    <div class="flex-grow">
      <h3 class="mb-1 text-lg font-semibold">
        {entry.data.title}
      </h3>
      <p class="mb-2 text-sm text-muted-foreground">
        {entry.data.description}
      </p>
      <div
        class="mb-2 flex items-center space-x-2 text-xs text-muted-foreground"
      >
        {
          author && (
            <>
              <div class="flex items-center gap-1.5">
                <Image
                  src={author.data.avatar}
                  alt={author.data.name}
                  width={18}
                  height={18}
                  class="rounded-full"
                />
                <span>{author.data.name}</span>
              </div>
              <Separator orientation="vertical" className="h-4" />
            </>
          )
        }
        <span>{formattedDate}</span>
        <Separator orientation="vertical" className="h-4" />
        <span>{readTime}</span>
      </div>
      {
        entry.data.tags && (
          <div class="flex flex-wrap gap-2">
            {entry.data.tags.map((tag) => (
              <Badge variant="secondary">{tag}</Badge>
            ))}
          </div>
        )
      }
    </div>
  </Link>
</div>