import { LeaveType } from "@/app/api/timesheets";
import { LeaveEntry } from "@/app/api/timesheets/actions";
import { manhourFormatter } from "@/app/utils/formatUtil";
import { Edit } from "@mui/icons-material";
import { Box, Card, CardContent, IconButton, Typography } from "@mui/material";
import { useTranslation } from "react-i18next";

interface Props {
  entry: LeaveEntry;
  onEdit?: () => void;
  leaveTypeMap: {
    [id: number]: LeaveType;
  };
}

const LeaveEntryCard: React.FC<Props> = ({ entry, onEdit, leaveTypeMap }) => {
  const { t } = useTranslation("home");
  return (
    <Card sx={{ marginInline: 1, overflow: "visible" }}>
      <CardContent
        sx={{
          padding: 2,
          display: "flex",
          flexDirection: "column",
          gap: 2,
          "&:last-child": {
            paddingBottom: 2,
          },
        }}
      >
        <Box
          display="flex"
          justifyContent="space-between"
          alignItems="flex-start"
        >
          <Box>
            <Typography variant="body2" component="div" fontWeight="bold">
              {t(leaveTypeMap[entry.leaveTypeId].name)}
            </Typography>
            <Typography component="p">
              {manhourFormatter.format(entry.inputHours)}
            </Typography>
          </Box>
          {onEdit && (
            <IconButton size="small" color="primary" onClick={onEdit}>
              <Edit />
            </IconButton>
          )}
        </Box>
        {entry.remark && (
          <Box>
            <Typography variant="body2" component="div" fontWeight="bold">
              {t("Remarks")}
            </Typography>
            <Typography component="p">{entry.remark}</Typography>
          </Box>
        )}
      </CardContent>
    </Card>
  );
};

export default LeaveEntryCard;
