import { Box, Card, CardContent, Typography, IconButton } 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 { DateRangePicker } from "../DateRangePicker/DateRangePicker";

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>
        <Box sx={{ display: "flex", justifyContent: "space-between", mb: 2 }}>
          <Typography variant="h5" fontWeight="bold">
            General Health
          </Typography>
          <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
            <CalendarTodayIcon fontSize="small" />
            <Typography variant="body2">
              <DateRangePicker />
            </Typography>
            <IconButton size="small">
              <MoreVertIcon fontSize="small" />
            </IconButton>
          </Box>
        </Box>
        <Box sx={{ display: "flex", justifyContent: "space-around", mt: 2 }}>
          {stats.map((item, i) => (
            <StatItem key={item.label + i} {...item} />
          ))}
        </Box>
      </CardContent>
    </Card>
  );
};