import {
  Box,
  Card,
  CardContent,
  Typography,
  IconButton,
  Divider,
} from '@mui/material';
import MoreVertIcon from '@mui/icons-material/MoreVert';
import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
// import { ArrowDropUp } from '@mui/icons-material';

const stats = [
  { label: 'TOTAL', value: 5, change: '-84.85%' },
  { label: 'SUCCESSFUL', value: 10, change: '100%' },
  { label: 'ACCEPTANCE RATE', value: '0%', change: '-100%' },
  { label: 'AMOUNT', value: '€0.00', change: '-100%' },
  { label: 'ATV', value: '€0.00', change: '-100%' },
];

const StatItem = ({ label, value, change }: { label: string, value: string | number, change: string }) => (
  <Box sx={{ textAlign: 'center', px: 2 }}>
    <Typography variant="body2" fontWeight="bold" color="text.secondary">
      {label}
    </Typography>
    <Typography variant="h6" fontWeight="bold" mt={0.5}>
      {value}
    </Typography>
    <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'error.main' }}>
      <ArrowDropDownIcon fontSize="small" />
      {/* <ArrowDropUp fontSize='small' /> */}
      <Typography variant="caption">{change}</Typography>
    </Box>
  </Box>
);

export const GeneralHealthCard = () => {
  return (
    <Card sx={{ borderRadius: 3, p: 2 }}>
      <CardContent sx={{ pb: '16px !important' }}>
        <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 2 }}>
          <Typography variant="subtitle1" fontWeight="bold">
            General Health
          </Typography>
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
            <CalendarTodayIcon fontSize="small" />
            <Typography variant="body2">Last 24h</Typography>
            <IconButton size="small">
              <MoreVertIcon fontSize="small" />
            </IconButton>
          </Box>
        </Box>

        <Divider />

        <Box sx={{ display: 'flex', justifyContent: 'space-around', mt: 2 }}>
          {stats.map((item) => (
            <StatItem key={item.label} {...item} />
          ))}
        </Box>
      </CardContent>
    </Card>
  );
}