/**
 * @ai-summary Header component for admin sections with title and stats
 * @ai-context Displays section title with stat cards showing counts
 */

import React from 'react';
import { Box, Typography, Card, CardContent, Grid } from '@mui/material';

/**
 * Stat item definition
 */
export interface StatItem {
  label: string;
  value: number;
}

/**
 * Props for AdminSectionHeader component
 */
export interface AdminSectionHeaderProps {
  title: string;
  stats: StatItem[];
}

/**
 * Header component displaying title and stats cards
 *
 * @example
 * ```tsx
 * <AdminSectionHeader
 *   title="Vehicle Catalog"
 *   stats={[
 *     { label: 'Makes', value: 100 },
 *     { label: 'Models', value: 500 }
 *   ]}
 * />
 * ```
 */
export const AdminSectionHeader: React.FC<AdminSectionHeaderProps> = ({
  title,
  stats,
}) => {
  return (
    <Box sx={{ mb: 4 }}>
      <Typography
        variant="h4"
        component="h1"
        sx={{
          mb: 3,
          fontWeight: 600,
          color: 'text.primary',
        }}
      >
        {title}
      </Typography>

      <Grid container spacing={2}>
        {stats.map((stat) => (
          <Grid item xs={12} sm={6} md={3} key={stat.label}>
            <Card
              sx={{
                height: '100%',
                boxShadow: 1,
                transition: 'box-shadow 0.2s',
                '&:hover': {
                  boxShadow: 2,
                },
              }}
            >
              <CardContent>
                <Typography
                  variant="body2"
                  color="text.secondary"
                  sx={{ mb: 1 }}
                >
                  {stat.label}
                </Typography>
                <Typography
                  variant="h5"
                  component="div"
                  sx={{ fontWeight: 600 }}
                >
                  {stat.value.toLocaleString()}
                </Typography>
              </CardContent>
            </Card>
          </Grid>
        ))}
      </Grid>
    </Box>
  );
};
