import Image from "next/image";
import Link from "next/link";
import { Category } from "@/lib/types";

export function CategoryTile({ category }: { category: Category }) {
  return (
    <Link
      href={`/category/${category.slug}`}
      className="group flex flex-col overflow-hidden rounded-2xl border border-black/[0.06] bg-white transition hover:border-black/[0.12] hover:shadow-card"
    >
      <div className="relative aspect-[4/3] w-full overflow-hidden bg-brand-cream">
        <Image
          src={category.image}
          alt={category.name}
          fill
          sizes="(max-width: 640px) 50vw, 25vw"
          className="object-cover transition-transform duration-200 group-hover:scale-[1.04]"
        />
      </div>
      <div className="px-3.5 py-3">
        <h3 className="font-display text-sm font-semibold text-brand-ink">
          {category.name}
        </h3>
        <p className="mt-0.5 text-xs text-black/50">Shop now</p>
      </div>
    </Link>
  );
}