import React from "react";
import { Box, Grid } from "@mui/material";
import CardComponent from "./CardHomeOhcStore";
import opdImage from "../../assets/images/OPD.svg";
import appointmentImage from "../../assets/images/Appointments.svg";
import indentImage from "../../assets/images/Indent.svg";
import healthSurvillanceImage from "../../assets/images/Health Surveillance.svg";
import injuryImage from "../../assets/images/Injury - Accident On Duty.svg";
import fitnessImage from "../../assets/images/Fitness.svg";
import ChartComponent from "./ChartOhcStore"; 
import StoreIcon from "@mui/icons-material/Store"; 

const HomeOhcStore = () => {
  return (
    <>
      <Box sx={{ padding: "0rem" }}>
        <Grid container spacing={2} justifyContent="flex-start">
          <Grid item xs={12} sm={6} md={4} lg={3}>
            <CardComponent
              title="0/0 Cases"
              subtitle="OPD"
              image={opdImage}
              to=""
            />
          </Grid>
          <Grid item xs={12} sm={6} md={4} lg={3}>
            <CardComponent
              title="0/0 Cases"
              subtitle="Health Surveillance"
              image={healthSurvillanceImage}
              to=""
            />
          </Grid>
          <Grid item xs={12} sm={6} md={4} lg={3}>
            <CardComponent
              title="0/0 Cases"
              subtitle="Injury"
              image={injuryImage}
              to=""
            />
          </Grid>
          <Grid item xs={12} sm={6} md={4} lg={3}>
            <CardComponent
              title="0/0 Cases"
              subtitle="Fitness"
              image={fitnessImage}
              to=""
            />
          </Grid>
          <Grid item xs={12} sm={6} md={4} lg={3}>
            <CardComponent
              title="0/0 Items"
              subtitle="Indent"
              image={indentImage}
              to="/inventory/indent-list"
            />
          </Grid>
          <Grid item xs={12} sm={6} md={4} lg={3}>
            <CardComponent
              title="0/0 Items"
              subtitle="Nearing Expiry"
              image={indentImage}
              to="/inventory/nearing-expiry"
            />
          </Grid>
          <Grid item xs={12} sm={6} md={4} lg={3}>
            <CardComponent
              title="0/0 Items"
              subtitle="Expired"
              image={indentImage}
              to="/inventory/expired"
            />
          </Grid>
          <Grid item xs={12} sm={6} md={4} lg={3}>
            <CardComponent
              title="0/0 Items"
              subtitle="Store Stock"
              image={StoreIcon}
              to="inventory/store-stock"
            />
          </Grid>
          <Grid item xs={12} sm={6} md={4} lg={3}>
            <CardComponent
              title="0/0 Cases"
              subtitle="Appointment"
              image={appointmentImage}
              to=""
            />
          </Grid>
        </Grid>
      </Box>

      {/* Second Box containing the chart components */}
      <Box sx={{ padding: "1rem" }}>
        <Grid container spacing={2}>
          <Grid item xs={12} md={6}>
            <ChartComponent title="OSI Weekly Report" />
          </Grid>
          <Grid item xs={12} md={6}>
            <ChartComponent title="Injury Weekly Report" />
          </Grid>
        </Grid>
      </Box>
    </>
  );
};

export default HomeOhcStore;