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

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

export function StewardingStats({ totalPending, totalResolved, totalPenalties }: StewardingStatsProps) {
  return (
    <Grid cols={1} mdCols={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)"
      />
    </Grid>
  );
}