'use client';

import { motion } from 'framer-motion';

interface FunnelStage {
  label: string;
  value: number;
  color: string;
}

export default function RecruitmentFunnel({ stages }: { stages: FunnelStage[] }) {
  const max = stages[0]?.value || 1;

  return (
    <div className="space-y-2.5">
      {stages.map((stage, i) => {
        const pct = Math.round((stage.value / max) * 100);

        return (
          <motion.div
            key={stage.label}
            initial={{ opacity: 0, x: -16 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ delay: i * 0.08 }}
          >
            <div className="flex items-center justify-between mb-1">
              <span className="text-xs font-semibold text-slate-600 dark:text-slate-400">{stage.label}</span>
              <span className="text-xs font-bold text-slate-800 dark:text-slate-200">{stage.value.toLocaleString()}</span>
            </div>
            <div className="h-4 bg-slate-100 dark:bg-slate-800 rounded-full overflow-hidden">
              <motion.div
                initial={{ width: 0 }}
                animate={{ width: `${pct}%` }}
                transition={{ duration: 0.7, delay: i * 0.08 }}
                className="h-full rounded-full flex items-center justify-end pr-1.5"
                style={{ backgroundColor: stage.color }}
              >
                {pct >= 15 && (
                  <span className="text-[9px] font-bold text-white">{pct}%</span>
                )}
              </motion.div>
            </div>
          </motion.div>
        );
      })}
    </div>
  );
}