martials.no/src/components/projects/ProjectCard.astro

---
import { Image } from "astro:assets"
import { type ImageMetadata } from "astro"
import BadgeList from "../badge/BadgeList.astro"
import LocaleLink from "../links/LocaleLink.astro"
import { type NavLink } from "@/utils/linking"

interface Props {
  title: string
  description: string
  tags: string[]
  image: ImageMetadata
  imageAlt: string
  linkTo: NavLink
}

const { title, description, tags, image, imageAlt, linkTo } = Astro.props
---

<LocaleLink
  to={linkTo}
  class="card bg-cat-base max-w-96 shadow-xl hover:scale-105 transition border border-cat-surface0"
>
  <figure>
    <Image src={image} alt={imageAlt} />
    <figcaption class="sr-only">{imageAlt}</figcaption>
  </figure>
  <div class="card-body text-cat-text">
    <h2 class="card-title">
      {title}
    </h2>
    <p>{description}</p>
    <BadgeList tags={tags} />
  </div>
</LocaleLink>