'use client';

import StatsCard from '@/components/dashboard/StatsCard';
import { ProgressCard } from '@/components/reports/SummaryCards';
import type { ScreeningDashboard } from './types';

/** Which slice of the candidates table a card click reveals. */
export type CardFilter = 'all' | 'running' | 'completed' | 'qualified' | 'rejected' | 'scored';

interface AIScreeningCardsProps {
  data: ScreeningDashboard;
  onSelect: (filter: CardFilter) => void;
}

export default function AIScreeningCards({ data, onSelect }: AIScreeningCardsProps) {
  return (
    <div className="grid grid-cols-2 sm:grid-cols-3 xl:grid-cols-6 gap-4">
      <StatsCard
        title="Total Candidates"
        value={data.total_candidates}
        icon="fa-solid fa-users"
        color="indigo"
        delay={0}
        onClick={() => onSelect('all')}
      />
      <StatsCard
        title="AI Calls Running"
        value={data.calls_running}
        icon="fa-solid fa-phone-volume"
        color="cyan"
        delay={1}
        onClick={() => onSelect('running')}
      />
      <StatsCard
        title="Calls Completed"
        value={data.calls_completed}
        icon="fa-solid fa-phone-flip"
        color="blue"
        delay={2}
        onClick={() => onSelect('completed')}
      />
      <StatsCard
        title="Qualified"
        value={data.qualified}
        icon="fa-solid fa-user-check"
        color="emerald"
        delay={3}
        onClick={() => onSelect('qualified')}
      />
      <StatsCard
        title="Rejected"
        value={data.rejected}
        icon="fa-solid fa-user-xmark"
        color="rose"
        delay={4}
        onClick={() => onSelect('rejected')}
      />
      <ProgressCard
        title="Average AI Score"
        value={data.average_score}
        icon="fa-solid fa-gauge-high"
        iconBg="bg-amber-500"
        barColor="bg-amber-500"
        subtitle="Across completed calls"
        delay={5}
        onClick={() => onSelect('scored')}
      />
    </div>
  );
}