---
import { formatDate, iconMappings } from '@/lib/utils'
import { Icon } from 'astro-icon/components'
import { Image } from 'astro:assets'
import type { CollectionEntry } from 'astro:content'
import Link from './Link.astro'

interface Props {
  entry: CollectionEntry<'events'>
}

const { entry } = Astro.props
const formattedDate = formatDate(entry.data.date)
---

<div
  class="hover:bg-muted/50 rounded-xl border p-4 transition-colors duration-300 ease-in-out"
>
  <Link
    href={`/${entry.collection}/${entry.id}`}
    class="flex flex-col gap-4 sm:flex-row"
  >
    {
      entry.data.image && (
        <div class="w-full sm:max-w-3xs sm:shrink-0">
          <Image
            src={entry.data.image}
            alt={entry.data.title}
            width={1200}
            height={630}
            class="object-cover"
          />
        </div>
      )
    }

    <div class="grow">
      <h3 class="mb-1 text-lg font-medium">{entry.data.title}</h3>
      <p class="text-muted-foreground mb-4">{entry.data.description}</p>

      <div
        class="text-muted-foreground mb-2 flex flex-wrap items-center gap-1 text-xs"
      >
        <Icon name="lucide:calendar" class="size-3" />
        <span>{formattedDate}</span>
      </div>

      {
        entry.data.type && (
          <div class="text-muted-foreground mb-2 flex flex-wrap items-center gap-1 text-xs">
            <Icon
              name={iconMappings[entry.data.type] || 'lucide:hash'}
              class="size-3"
            />
            <span class="capitalize">{entry.data.type}</span>
          </div>
        )
      }
    </div>
  </Link>
</div>