import React from 'react';
import Link from 'next/link';
import { TPrestasi } from '@/types/domain';
import { formatDate } from '@/lib/utils';
import { Calendar, User, Award, ArrowRight, FileText } from 'lucide-react';

interface VerifikasiCardProps {
  prestasi: TPrestasi;
}

export function VerifikasiCard({ prestasi }: VerifikasiCardProps) {
  return (
    <div className="bg-card border border-text-muted/10 rounded-2xl p-6 shadow-sm hover:shadow-md transition-shadow flex flex-col justify-between gap-4 relative overflow-hidden">
      
      {/* Header Info */}
      <div className="space-y-3 relative z-10">
        <div className="flex items-center justify-between gap-2">
          <span className="text-[10px] font-bold text-accent uppercase tracking-wider bg-accent/5 px-2 py-0.5 rounded-md border border-accent/10">
            {prestasi.tingkat}
          </span>
          <span className="text-[11px] text-text-muted font-bold">
            NIM: {prestasi.nim}
          </span>
        </div>

        <div className="space-y-1">
          <span className="block text-xs font-semibold text-text-muted">Pengaju: <span className="text-text-primary font-bold">{prestasi.mahasiswaName}</span></span>
          <h4 className="text-base font-bold text-text-primary leading-snug line-clamp-2">
            {prestasi.namaKegiatan}
          </h4>
          <p className="text-xs text-text-muted font-medium">
            Capaian: <span className="text-primary font-extrabold">{prestasi.capaian}</span>
          </p>
        </div>
      </div>

      {/* Footer Info & Actions */}
      <div className="flex items-center justify-between text-[11px] text-text-muted border-t border-text-muted/5 pt-4 relative z-10 font-medium font-sans">
        <div className="flex items-center gap-1">
          <Calendar className="h-3.5 w-3.5" />
          <span>Diajukan: {formatDate(prestasi.createdAt)}</span>
        </div>

        <Link
          href={`/dashboard/operator/verifikasi/${prestasi.id}`}
          className="inline-flex items-center gap-1.5 px-3.5 py-1.5 bg-primary text-white hover:bg-primary-dark font-bold rounded-lg transition-colors shadow-sm"
        >
          Review Berkas
          <ArrowRight className="h-3 w-3" />
        </Link>
      </div>

      {/* Background shape */}
      <div className="absolute right-[-20px] bottom-[-20px] w-20 h-20 rounded-full bg-accent/5 blur-xl pointer-events-none" />
    </div>
  );
}