/**
 * My Requests Stats Section Component
 */

import { FileText, Clock, Pause, CheckCircle, XCircle, Edit } from 'lucide-react';
import { StatsCard } from '@/components/dashboard/StatsCard';
import { MyRequestsStats } from '../types/myRequests.types';

interface MyRequestsStatsProps {
  stats: MyRequestsStats;
  onStatusFilter?: (status: string) => void;
}

export function MyRequestsStatsSection({ stats, onStatusFilter }: MyRequestsStatsProps) {
  const handleCardClick = (status: string) => {
    if (onStatusFilter) {
      onStatusFilter(status);
    }
  };
  return (
    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3 sm:gap-4" data-testid="my-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="Paused"
        value={stats.paused}
        icon={Pause}
        iconColor="text-amber-600"
        gradient="bg-gradient-to-br from-amber-50 to-amber-100 border-amber-200"
        textColor="text-amber-700"
        valueColor="text-amber-900"
        testId="stat-paused"
        onClick={onStatusFilter ? () => handleCardClick('paused') : 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="Draft"
        value={stats.draft}
        icon={Edit}
        iconColor="text-gray-600"
        gradient="bg-gradient-to-br from-gray-50 to-gray-100 border-gray-200"
        textColor="text-gray-700"
        valueColor="text-gray-900"
        testId="stat-draft"
        onClick={onStatusFilter ? () => handleCardClick('draft') : undefined}
      />
    </div>
  );
}