import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { ThumbsUp, ThumbsDown } from "lucide-react";
import Image from "next/image";
import Link from "next/link";

type PublikasiCardProps = {
  id: number;
  image: string;
  label: string;
  category: string;
  date: string;
  title: string;
  description: string;
};

export default function PublicationKlFilter({
  id,
  image,
  label,
  category,
  date,
  title,
  description,
}: PublikasiCardProps) {
  return (
    <Card className="overflow-hidden shadow-md w-[315px] h-[417px] p-0 flex flex-col">
      {/* Gambar atas */}
      <Link href={`/content/video/detail/${id}`}>
        <div className="relative w-full h-[250px]">
          <Image src={image} alt={title} fill className="object-cover" />
        </div>

        <CardContent className="px-4  space-y-2 flex-grow">
          <div className="flex flex-wrap gap-2 text-xs font-semibold mt-2">
            <span
              className={`px-2 py-1 rounded text-white ${
                label === "POLRI"
                  ? "bg-red-600"
                  : label === "MPR"
                  ? "bg-[#DDBF00]"
                  : label === "DPR"
                  ? "bg-[#EFBC2F]"
                  : label === "KPK"
                  ? "bg-[#FE0000]"
                  : label === "PUPR"
                  ? "bg-[#030F6B]"
                  : label === "MAHKAMAH AGUNG"
                  ? "bg-[#FFC928]"
                  : label === "KEJAKSAAN AGUNG"
                  ? "bg-green-600"
                  : "bg-gray-400"
              }`}
            >
              {label}
            </span>
            <span className="text-gray-600">{category}</span>
          </div>
          <p className="text-xs text-gray-500">{date}</p>
          <h3 className="text-sm font-semibold line-clamp-2">{title}</h3>
          <p className="text-sm text-gray-600 line-clamp-2">{description}</p>
          <div className="flex justify-between items-center mt-2">
            <div className="flex items-center gap-3 text-muted-foreground">
              <ThumbsUp className="w-4 h-4 cursor-pointer" />
              <ThumbsDown className="w-4 h-4 cursor-pointer" />
            </div>
            <Button
              size="sm"
              variant="outline"
              className="bg-[#3665FF] text-white"
            >
              Save
            </Button>
          </div>
        </CardContent>
      </Link>
    </Card>
  );
}