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

interface StewardingStatsProps {
  totalPending: number;
  totalResolved: number;
  totalPenalties: number;
}

export function StewardingStats({ totalPending, totalResolved, totalPenalties }: StewardingStatsProps) {
  return (
    <Box display="grid" responsiveGridCols={{ base: 1, sm: 3 }} gap={4} mb={6}>
      <StatBox
        icon={Clock}
        label="Pending Review"
        value={totalPending}
        color="var(--warning-amber)"
      />
      <StatBox
        icon={CheckCircle}
        label="Resolved"
        value={totalResolved}
        color="var(--performance-green)"
      />
      <StatBox
        icon={Gavel}
        label="Penalties"
        value={totalPenalties}
        color="var(--racing-red)"
      />
    </Box>
  );
}