import { getFileThumbnailUrl } from "@/shared/utils/file";
import Image from "next/image";
import Link from "next/link";

export default function CategoryCard({
  name,
  icon,
  link, totalDataset,
}: Readonly<{
  id: string;
  name: string;
  description?: string | null;
  icon?: string | null;
  link: string;
    totalDataset: number;
}>) {
  return (
    <Link
      href={link}
      className="group flex h-full flex-col items-center justify-start gap-4 rounded-2xl border border-zinc-200 bg-white p-6 text-center shadow-sm transition-colors hover:border-primary"
    >
      <div className="flex w-full items-center justify-center">
        <div className="relative h-28 w-28 shrink-0 rounded-full bg-white">
          <Image
            src={getFileThumbnailUrl(icon || "/landing/logo_pemprov_jatim.png")}
            alt={name}
            fill
            sizes="112px"
            className="object-contain"
          />
        </div>
      </div>

      <div className="mt-2 w-full">
        <h3 className="mb-2 line-clamp-2 text-lg font-semibold text-zinc-800 min-h-[2.75rem]">{name}</h3>

        <div className="text-md text-biru-300 font-semibold">
          {totalDataset} Dataset
        </div>
      </div>
    </Link>
  );
}
