"use client";

import { motion } from "framer-motion";
import { useTranslations } from "next-intl";
import { certs } from "@/lib/demoData";
import { Award } from "lucide-react";

export function CertCard({ c, i }: { c: (typeof certs)[0]; i: number }) {
  const t = useTranslations();

  return (
    <motion.article
      initial={{ opacity: 0, y: 28 }}
      whileInView={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.55, delay: i * 0.1 }}
      viewport={{ once: true }}
      className="group flex flex-col rounded-2xl overflow-hidden sm:p-5 p-2 bg-[#161514] border border-white/5 hover:border-red-600/20 transition-colors duration-300 w-full"
    >
      {/* Right: meta + actions for gitea */}
      <div className="flex flex-col justify-between flex-1 min-w-0 py-1 gap-4">
        <div className="space-y-2">
          {/* Badge row */}
          <div className="flex items-center gap-2 flex-wrap">
            <div className="flex items-center gap-1.5">
              <Award size={11} className="text-red-600 shrink-0" />
              <span className="text-[10px] font-black uppercase tracking-widest text-red-600">
                {t("about.certificatePage.card.badge")}
              </span>
            </div>
            <span className="text-[10px] font-bold uppercase tracking-wider text-white/20 border border-white/10 px-2 py-0.5 rounded-full">
              {c.category}
            </span>
          </div>

          {/* Title */}
          <h3 className="font-bold text-sm md:text-base text-white leading-snug">
            {c.title}
          </h3>
        </div>
      </div>

      {/* ── Divider ── */}
      <div className="mx-4 h-px bg-white/5 sm:my-5 my-2" />

      {/* Collapsible document list */}
      <div className="overflow-hidden">
        <ul className="flex flex-col gap-2.5">
          {c.documents.map((doc, di) => (
            <li key={di} className="flex items-start gap-2.5">
              <span className="mt-1 flex-none w-1.5 h-1.5 rounded-full bg-red-600/60" />
              <p className="text-xs text-gray-400 leading-relaxed">{doc}</p>
            </li>
          ))}
        </ul>
      </div>
    </motion.article>
  );
}