import React from 'react';
import Box from '@mui/material/Box';
import Card from '@mui/material/Card';
import Typography from '@mui/material/Typography';
import FolderIcon from '@mui/icons-material/Folder';
import DescriptionIcon from '@mui/icons-material/Description';
import Inventory2Icon from '@mui/icons-material/Inventory2';
import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';

const ICONS = {
  projects: FolderIcon,
  bom: DescriptionIcon,
  materials: Inventory2Icon,
  purchase: ShoppingCartIcon,
};

export default function MetricCards({ metrics }) {
  const entries = Object.entries(metrics);

  return (
    <Box sx={{ display: 'grid', gridTemplateColumns: { xs: '1fr 1fr', md: 'repeat(4, 1fr)' }, gap: 2 }}>
      {entries.map(([key, { label, value, color }]) => {
        const Icon = ICONS[key] || FolderIcon;
        return (
          <Card
            key={key}
            sx={{
              p: 2.5,
              display: 'flex',
              alignItems: 'center',
              gap: 2,
              borderLeft: `4px solid ${color}`,
              transition: 'box-shadow 0.2s',
              '&:hover': { boxShadow: '0 4px 12px rgba(0,0,0,0.1)' },
            }}
          >
            <Box
              sx={{
                width: 44,
                height: 44,
                borderRadius: 1.5,
                bgcolor: `${color}14`,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                flexShrink: 0,
              }}
            >
              <Icon sx={{ color, fontSize: 22 }} />
            </Box>
            <Box sx={{ minWidth: 0 }}>
              <Typography variant="h5" sx={{ fontWeight: 700, color: '#111827', lineHeight: 1.2 }}>
                {value}
              </Typography>
              <Typography variant="body2" sx={{ color: 'text.secondary', mt: 0.25 }}>
                {label}
              </Typography>
            </Box>
          </Card>
        );
      })}
    </Box>
  );
}
