'use client';

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

export default function OverallDashboardSummaryCards({ summary }: { summary: OverallSummary }) {
  const router = useRouter();

  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4">
      <StatsCard
        title="Total Active Jobs"
        value={summary.total_active_jobs}
        icon="fa-solid fa-briefcase"
        color="indigo"
        delay={0}
        onClick={() => router.push('/jobs')}
      />
      <StatsCard
        title="Total Candidates"
        value={summary.total_candidates}
        icon="fa-solid fa-users"
        color="blue"
        delay={1}
        onClick={() => router.push('/candidates')}
      />
      <StatsCard
        title="Active Recruiters"
        value={summary.active_recruiters}
        icon="fa-solid fa-user-tie"
        color="purple"
        delay={2}
        onClick={() => router.push('/admins/recruiters')}
      />
      <ProgressCard
        title="Average Candidate Score"
        value={summary.average_score}
        icon="fa-solid fa-gauge-high"
        iconBg="bg-amber-500"
        barColor="bg-amber-500"
        subtitle="AI/manual screening score across active jobs"
        delay={3}
        onClick={() => router.push('/candidates')}
      />
      <StatsCard
        title="Total Interviews"
        value={summary.total_interviews}
        icon="fa-solid fa-comments"
        color="cyan"
        delay={4}
        onClick={() => router.push('/candidates')}
      />
      <StatsCard
        title="Total Hires"
        value={summary.total_hires}
        icon="fa-solid fa-user-check"
        color="emerald"
        delay={5}
        onClick={() => router.push('/candidates')}
      />
      <ProgressCard
        title="Offer Acceptance Rate"
        value={summary.offer_acceptance_rate}
        icon="fa-solid fa-handshake"
        iconBg="bg-teal-500"
        barColor="bg-teal-500"
        subtitle={`${summary.total_hires} hired of ${summary.offered_candidates} offered`}
        delay={6}
        onClick={() => router.push('/candidates')}
      />
      <StatsCard
        title="Avg Time to Hire"
        value={summary.average_time_to_hire}
        icon="fa-solid fa-hourglass-half"
        color="rose"
        suffix=" days"
        delay={7}
        onClick={() => router.push('/candidates')}
      />
    </div>
  );
}