import React from "react";
import { Box, Card, CardContent, Grid, Typography } from "@mui/material";
import { useTranslation } from "react-i18next";
import { manhourFormatter } from "@/app/utils/formatUtil";
import { AssignedProject } from "@/app/api/projects";

interface Props {
  projects: AssignedProject[];
}

const ProjectGrid: React.FC<Props> = ({ projects }) => {
  const { t } = useTranslation("home");
  return (
    <Box>
      <Grid container columns={{ xs: 4, sm: 8, md: 12, lg: 16 }} spacing={2}>
        {projects.map((project, idx) => (
          <Grid key={`${project.code}${idx}`} item xs={4}>
            <Card>
              <CardContent>
                <Typography variant="overline">{project.code}</Typography>
                <Typography
                  variant="h6"
                  sx={{
                    overflow: "hidden",
                    textOverflow: "ellipsis",
                    whiteSpace: "nowrap",
                    marginBlockEnd: 3,
                  }}
                >
                  {project.name}
                </Typography>
                {/* Hours Spent */}
                <Typography variant="subtitle2">{t("Hours Spent:")}</Typography>
                <Box
                  sx={{
                    display: "flex",
                    justifyContent: "space-between",
                    alignItems: "baseline",
                  }}
                >
                  <Typography variant="caption">{t("Normal")}</Typography>
                  <Typography>
                    {manhourFormatter.format(project.hoursSpent)}
                  </Typography>
                </Box>
                <Box
                  sx={{
                    display: "flex",
                    justifyContent: "space-between",
                    alignItems: "baseline",
                  }}
                >
                  <Typography variant="caption">{t("(Others)")}</Typography>
                  <Typography>{`(${manhourFormatter.format(
                    project.hoursSpentOther,
                  )})`}</Typography>
                </Box>
                {/* Hours Allocated */}
                <Box
                  sx={{
                    display: "flex",
                    justifyContent: "space-between",
                    alignItems: "baseline",
                  }}
                >
                  <Typography variant="subtitle2" sx={{ marginBlockStart: 2 }}>
                    {t("Hours Allocated:")}
                  </Typography>
                  <Typography>
                    {manhourFormatter.format(project.hoursAllocated)}
                  </Typography>
                </Box>
              </CardContent>
            </Card>
          </Grid>
        ))}
      </Grid>
    </Box>
  );
};

export default ProjectGrid;
