import Image from "next/image";
import Link from "next/link";

function CategoryCard({
  title,
  description,
  href = "/products",
  image = "/demo_product_1.png",
}: {
  title: string;
  description: string;
  href?: string;
  image?: string;
}) {
  return (
    <article
      className="card-gradient-gray relative overflow-hidden w-full max-w-68 card-shadow flex flex-col rounded-[1.75rem]"
      data-purpose="category-card"
    >
      <div
        className="relative w-full overflow-hidden aspect-square"
        data-purpose="category-image-wrapper"
      >
        <Link href={href} prefetch className="absolute inset-0">
          <Image
            alt={title}
            className="w-full h-full object-cover"
            src={image}
            fill
            sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
          />
        </Link>
      </div>

      <div className="p-3" data-purpose="category-info">
        <Link
          href={href}
          prefetch
          className="text-lg text-foreground font-semibold mb-1 tracking-[-0.01em] block"
        >
          {title}
        </Link>
        <p className="text-[11px] leading-4 text-[#696969] line-clamp-2">
          {description}
        </p>
      </div>
    </article>
  );
}

export default CategoryCard;