import React from 'react';
import { Box, Paper, Typography } from '@mui/material';
import { SummaryCardsSkeleton } from './SkeletonPresets';

export interface SummaryStat {
  label: string;
  value: string | number;
  color?: string;
  onClick?: () => void;
}

export interface SummaryCardsProps {
  stats: SummaryStat[];
  isLoading?: boolean;
}

/** Mini stat cards displayed in a responsive grid row. */
export const SummaryCards: React.FC<SummaryCardsProps> = ({
  stats,
  isLoading = false,
}) => {
  if (isLoading) {
    return <SummaryCardsSkeleton count={stats.length || 4} />;
  }

  return (
    <Box display="grid" gridTemplateColumns="repeat(auto-fit, minmax(160px, 1fr))" gap={2}>
      {stats.map((stat, i) => (
        <Paper
          key={i}
          variant="outlined"
          onClick={stat.onClick}
          sx={{
            p: 2,
            textAlign: 'center',
            cursor: stat.onClick ? 'pointer' : 'default',
            '&:hover': stat.onClick ? { bgcolor: 'action.hover' } : {},
          }}
        >
          <Typography variant="h4" sx={{ color: stat.color || 'text.primary', fontWeight: 700 }}>
            {stat.value}
          </Typography>
          <Typography variant="body2" color="text.secondary">
            {stat.label}
          </Typography>
        </Paper>
      ))}
    </Box>
  );
};
