"use client";

import type { Certificate } from "@/types";
import Image from "next/image";
import { Award } from "lucide-react";
import { motion } from "framer-motion";

interface CertificateCardProps {
  certificate: Certificate;
  onClick: () => void;
}

export default function CertificateCard({
  certificate,
  onClick,
}: CertificateCardProps) {
  // const formattedDate = new Date(certificate.created_at).toLocaleDateString();

  return (
    <motion.div
      className="group bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 cursor-pointer h-full"
      whileHover={{ y: -5 }}
      onClick={onClick}
    >
      <div className="relative aspect-[4/3] overflow-hidden">
        <Image
          src={`${process.env.NEXT_PUBLIC_API_URL}/storage/${certificate.image}`}
          alt={certificate.title}
          fill
          className="object-cover transition-transform duration-500 group-hover:scale-110"
          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
        />

        <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
          <div className="px-4 py-2 bg-white/20 backdrop-blur-sm border border-white/30 rounded-full text-white flex items-center space-x-2 transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300">
            <Award className="w-4 h-4" />
            <span className="text-sm font-medium">View Certificate</span>
          </div>
        </div>
      </div>

      <div className="p-4">
        <h3 className="text-lg font-semibold text-gray-900 mb-2 line-clamp-2 group-hover:text-red-600 transition-colors">
          {certificate.title}
        </h3>

        {/* <div className="flex items-center text-gray-600 text-sm mb-1">
          <Building className="w-4 h-4 mr-2 text-gray-400" />
          <span>{certificate.issuer}</span>
        </div> */}
      </div>
    </motion.div>
  );
}