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

export default function OrganizationCard({
  name,
  link,
  totalDataset,
  icon,
}: Readonly<{
  name: string;
  link: string;
  totalDataset: number;
  icon: string;
}>) {
  return (
    <Link
      href={link}
      className="group font-onest transition-border hover:border-primary flex h-full flex-col justify-between gap-4 rounded-xl border border-[#94A3B8] p-6 ease-in-out hover:cursor-pointer hover:border-2"
    >
      <div className="flex items-center justify-between">
        <div className="relative h-28 w-28 shrink-0">
          <Image
            src={getFileThumbnailUrl(icon)}
            alt="icon"
            fill
            sizes="64px"
            className="object-contain"
          />
        </div>
        <ArrowRight
          size={24}
          className="group-hover:text-biru-300 text-gray-400 transition-colors duration-200"
        />
      </div>

      <div className="mt-6">
        <h3 className="text-base sm:text-sm font-medium line-clamp-3 min-h-[4.5rem]">
          {name}
        </h3>

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