'use client';

import { useRouter } from 'next/navigation';
import StatsCard from '@/components/dashboard/StatsCard';
import { ProgressCard } from './SummaryCards';
import type { CandidateReportsSummary } from './types';

interface CandidateReportSummaryCardsProps {
  summary: CandidateReportsSummary;
  /** Clicking a classification card filters the table below to that classification. */
  onClassificationClick?: (classification: string) => void;
}

export default function CandidateReportSummaryCards({ summary, onClassificationClick }: CandidateReportSummaryCardsProps) {
  const router = useRouter();

  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-5 gap-4">
      <StatsCard
        title="Total Reports"
        value={summary.total_reports}
        icon="fa-solid fa-file-pdf"
        color="indigo"
        delay={0}
        onClick={() => router.push('/reports')}
      />
      <StatsCard
        title="Generated Today"
        value={summary.generated_today}
        icon="fa-solid fa-calendar-day"
        color="cyan"
        delay={1}
        onClick={() => router.push('/reports/overall-dashboard')}
      />
      <StatsCard
        title="Highly Recommended"
        value={summary.highly_recommended}
        icon="fa-solid fa-star"
        color="emerald"
        delay={2}
        onClick={() => onClassificationClick?.('Highly Recommended')}
      />
      <StatsCard
        title="Recommended"
        value={summary.recommended}
        icon="fa-solid fa-thumbs-up"
        color="blue"
        delay={3}
        onClick={() => onClassificationClick?.('Recommended')}
      />
      <ProgressCard
        title="Average Score"
        value={summary.average_score}
        icon="fa-solid fa-gauge-high"
        iconBg="bg-amber-500"
        barColor="bg-amber-500"
        subtitle="Across latest report versions"
        delay={4}
        onClick={() => router.push('/candidates')}
      />
    </div>
  );
}