import { Box, Card, CardContent, Typography, IconButton } from "@mui/material";
import MoreVertIcon from "@mui/icons-material/MoreVert";
import CalendarTodayIcon from "@mui/icons-material/CalendarToday";

import { DateRangePicker } from "../DateRangePicker/DateRangePicker";
import { StatItem } from "./components/StatItem";
import "./GeneralHealthCard.scss";

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%" },
];

export const GeneralHealthCard = () => {
  return (
    <Card className="general-health-card">
      <CardContent>
        <Box className="general-health-card__header">
          <Typography variant="h5" fontWeight="bold">
            General Health
          </Typography>
          <Box className="general-health-card__right-side">
            <CalendarTodayIcon fontSize="small" />
            <Typography variant="body2">
              <DateRangePicker />
            </Typography>
            <IconButton size="small">
              <MoreVertIcon fontSize="small" />
            </IconButton>
          </Box>
        </Box>
        <Box className="general-health-card__stat-items">
          {stats.map((item, i) => (
            <StatItem key={item.label + i} {...item} />
          ))}
        </Box>
      </CardContent>
    </Card>
  );
};