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

interface Props {
  project: CollectionEntry<'projects'>
}

const { project } = Astro.props
---

<div
  class="hover:bg-muted/50 rounded-xl border p-4 transition-colors duration-300 ease-in-out"
>
  <Link
    href={project.data.link}
    class="flex flex-col gap-4 sm:flex-row"
    external
  >
    {
      project.data.image && (
        <div class="w-full sm:max-w-3xs sm:shrink-0">
          <Image
            src={project.data.image}
            alt={project.data.name}
            width={1200}
            height={630}
            class="object-cover"
          />
        </div>
      )
    }
    <div class="grow">
      <h3 class="mb-1 text-lg font-medium">
        {project.data.name}
      </h3>
      <p class="text-muted-foreground mb-2 text-sm">
        {project.data.description}
      </p>
      {
        project.data.startDate && (
          <p class="text-muted-foreground/70 mb-2 flex items-center gap-x-1.5 text-xs">
            <span class="flex items-center gap-x-1.5">
              <Icon name="lucide:calendar" class="size-3" />
              <span>
                {formatDate(project.data.startDate)}
                {project.data.endDate
                  ? ` → ${formatDate(project.data.endDate)}`
                  : ' → Present'}
              </span>
            </span>
          </p>
        )
      }
      {
        project.data.tags && (
          <div class="flex flex-wrap gap-2">
            {project.data.tags.map((tag: string) => (
              <Badge variant="muted">{tag}</Badge>
            ))}
          </div>
        )
      }
    </div>
  </Link>
</div>