'use client';
import { LeaveRequest } from './leaveData';

interface Props {
  requests: LeaveRequest[];
}

export default function LeaveStatsBar({ requests }: Props) {
  const today = new Date().toISOString().split('T')[0];
  const total = requests.length;
  const pending = requests.filter(r => r.status === 'Pending' || r.status === 'Pending Review').length;
  const approved = requests.filter(r => r.status === 'Approved').length;
  const rejected = requests.filter(r => r.status === 'Rejected').length;
  const onLeaveToday = requests.filter(r => r.status === 'Approved' && r.startDate <= today && r.endDate >= today).length;
  const totalDays = requests.filter(r => r.status === 'Approved').reduce((a, r) => a + r.days, 0);

  const stats = [
    { label: 'Total Requests', value: total, icon: 'ri-file-list-3-line', color: '#b828a0', bg: '#fdf4ff' },
    { label: 'Pending Approval', value: pending, icon: 'ri-time-line', color: '#d97706', bg: '#fef3c7' },
    { label: 'Approved', value: approved, icon: 'ri-checkbox-circle-line', color: '#16a34a', bg: '#dcfce7' },
    { label: 'Rejected', value: rejected, icon: 'ri-close-circle-line', color: '#dc2626', bg: '#fee2e2' },
    { label: 'On Leave Today', value: onLeaveToday, icon: 'ri-user-follow-line', color: '#3b82f6', bg: '#eff6ff' },
    { label: 'Total Days Approved', value: totalDays, icon: 'ri-calendar-check-line', color: '#8b5cf6', bg: '#f5f3ff' },
  ];

  return (
    <div className="grid grid-cols-6 gap-3 mb-5">
      {stats.map(s => (
        <div key={s.label} className="bg-white rounded-xl border border-gray-100 shadow-sm p-4">
          <div className="w-8 h-8 rounded-lg flex items-center justify-center mb-2" style={{ background: s.bg }}>
            <i className={s.icon} style={{ color: s.color }}></i>
          </div>
          <p className="text-xl font-bold text-gray-800">{s.value}</p>
          <p className="text-xs text-gray-500 mt-0.5 leading-tight">{s.label}</p>
        </div>
      ))}
    </div>
  );
}