import React from 'react';
import { CheckCircle, Clock, Gavel } from 'lucide-react';
import { Box } from '@/ui/Box';
import { StatGridItem } from '@/ui/StatGridItem';

interface RaceStewardingStatsProps {
  pendingCount: number;
  resolvedCount: number;
  penaltiesCount: number;
}

export function RaceStewardingStats({ pendingCount, resolvedCount, penaltiesCount }: RaceStewardingStatsProps) {
  return (
    <Box display="grid" gridCols={3} gap={4}>
      <StatGridItem
        label="Pending"
        value={pendingCount}
        icon={Clock}
        color="text-warning-amber"
      />
      <StatGridItem
        label="Resolved"
        value={resolvedCount}
        icon={CheckCircle}
        color="text-performance-green"
      />
      <StatGridItem
        label="Penalties"
        value={penaltiesCount}
        icon={Gavel}
        color="text-red-400"
      />
    </Box>
  );
}