import { Box, Card, Divider, Grid, Typography } from '@mui/material';
import { useStyles } from './styles/recruitmentAnalyticsComponentStyles';

const RecruitmentAnalytics = ({
  totalJobPublishedCount,
  activeJobsCount,
  expiredJobsCount,
  jobsInDraftCount,
}) => {
  const classes = useStyles();

  const formatCount = (count) => (count < 10 ? `0${count}` : count);

  return (
    <Card className={classes.recruitmentAnalyticsCard}>
      <Box className={classes.recruitmentAnalyticsBox}>
        <Grid container className={classes.recruitmentAnalyticsGridContainer}>
          {/* ............Total Job Published.............. */}
          <Grid
            item
            xs={12}
            className={classes.recruitmentAnalyticsJobTitleGrid}
          >
            <Typography
              className={`${classes.totalJobPublishCountColor} ${classes.recruitmentAnalyticsTotalJobCount}`}
            >
              {formatCount(totalJobPublishedCount)}
            </Typography>
            <Typography className={classes.recruitmentAnalyticsTotalJobTitle}>
              Total Job Published
            </Typography>
          </Grid>
          <Divider className={classes.dividerClass} flexItem />
          <Grid
            item
            xs={12}
            className={classes.recruitmentAnalyticsJobDetailsGrid}
          >
            {/* ..............Active Jobs.................... */}
            <Grid className={classes.recruitmentAnalyticsJobDetailsGridItem}>
              <Typography
                className={`${classes.activeJobsCountColor} ${classes.recruitmentAnalyticsTotalJobCount}`}
              >
                {formatCount(activeJobsCount)}
              </Typography>
              <Typography
                className={classes.recruitmentAnalyticsJobDetailsItemTitle}
              >
                Active Jobs
              </Typography>
            </Grid>
            <Divider
              className={classes.dividerClass}
              orientation="vertical"
              flexItem
            />
            {/* ................Expired Jobs.................. */}
            <Grid className={classes.recruitmentAnalyticsJobDetailsGridItem}>
              <Typography
                className={`${classes.expiredJobsCountColor} ${classes.recruitmentAnalyticsTotalJobCount}`}
              >
                {formatCount(expiredJobsCount)}
              </Typography>
              <Typography
                className={classes.recruitmentAnalyticsJobDetailsItemTitle}
              >
                Expired Jobs
              </Typography>
            </Grid>
            <Divider
              className={classes.dividerClass}
              orientation="vertical"
              flexItem
            />
            {/* ................Jobs in Draft................. */}
            <Grid className={classes.recruitmentAnalyticsJobDetailsGridItem}>
              <Typography
                className={`${classes.jobsInDraftCountColor} ${classes.recruitmentAnalyticsTotalJobCount}`}
              >
                {formatCount(jobsInDraftCount)}
              </Typography>
              <Typography
                className={classes.recruitmentAnalyticsJobDetailsItemTitle}
              >
                Jobs in Draft
              </Typography>
            </Grid>
          </Grid>
        </Grid>
      </Box>
    </Card>
  );
};

export default RecruitmentAnalytics;
