/**
 * Requests Stats Overview Component
 * Displays statistics cards for requests with click handlers to filter
 */

import { FileText, Clock, CheckCircle, XCircle, Archive } from 'lucide-react';
import { StatsCard } from '@/components/dashboard/StatsCard';
import type { RequestStats } from '../types/requests.types';

interface RequestsStatsProps {
  stats: RequestStats;
  onStatusFilter?: (status: string) => void;
}

export function RequestsStats({ stats, onStatusFilter }: RequestsStatsProps) {
  const handleCardClick = (status: string) => {
    if (onStatusFilter) {
      onStatusFilter(status);
    }
  };

  return (
    <div className="grid grid-cols-2 md:grid-cols-5 gap-3 sm:gap-4" data-testid="requests-stats">
      <StatsCard
        label="Total"
        value={stats.total}
        icon={FileText}
        iconColor="text-blue-600"
        gradient="bg-gradient-to-br from-blue-50 to-blue-100 border-blue-200"
        textColor="text-blue-700"
        valueColor="text-blue-900"
        testId="stat-total"
        onClick={onStatusFilter ? () => handleCardClick('all') : undefined}
      />

      <StatsCard
        label="Pending"
        value={stats.pending}
        icon={Clock}
        iconColor="text-orange-600"
        gradient="bg-gradient-to-br from-orange-50 to-orange-100 border-orange-200"
        textColor="text-orange-700"
        valueColor="text-orange-900"
        testId="stat-pending"
        onClick={onStatusFilter ? () => handleCardClick('pending') : undefined}
      />

      <StatsCard
        label="Approved"
        value={stats.approved}
        icon={CheckCircle}
        iconColor="text-green-600"
        gradient="bg-gradient-to-br from-green-50 to-green-100 border-green-200"
        textColor="text-green-700"
        valueColor="text-green-900"
        testId="stat-approved"
        onClick={onStatusFilter ? () => handleCardClick('approved') : undefined}
      />

      <StatsCard
        label="Rejected"
        value={stats.rejected}
        icon={XCircle}
        iconColor="text-red-600"
        gradient="bg-gradient-to-br from-red-50 to-red-100 border-red-200"
        textColor="text-red-700"
        valueColor="text-red-900"
        testId="stat-rejected"
        onClick={onStatusFilter ? () => handleCardClick('rejected') : undefined}
      />

      <StatsCard
        label="Closed"
        value={stats.closed}
        icon={Archive}
        iconColor="text-purple-600"
        gradient="bg-gradient-to-br from-purple-50 to-purple-100 border-purple-200"
        textColor="text-purple-700"
        valueColor="text-purple-900"
        testId="stat-closed"
        onClick={onStatusFilter ? () => handleCardClick('closed') : undefined}
      />
    </div>
  );
}