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

type Props = {
  project: CollectionEntry<'projects'>
}

const { project } = Astro.props
---

<div
  class="overflow-hidden rounded-xl border transition-colors duration-300 ease-in-out hover:bg-secondary/50"
>
  <Link href={project.data.link} class="block" external>
    <Image
      src={project.data.image}
      alt={project.data.name}
      width={400}
      height={200}
      class="w-full object-cover"
    />
    <div class="p-4">
      <h3 class="mb-2 text-lg font-semibold">{project.data.name}</h3>
      <p class="mb-4 text-sm text-muted-foreground">
        {project.data.description}
      </p>
      <div class="flex flex-wrap gap-2">
        {
          project.data.tags.map((tag) => (
            <Badge variant="secondary" showHash={false}>
              {tag}
            </Badge>
          ))
        }
      </div>
    </div>
  </Link>
</div>