"use client";

import { Chip } from "@mui/material";
import { useTheme } from "@mui/material/styles";

import type { MinistryRgcDecisionStatus } from "../data/ministry-rgc-decision-data";

const LIGHT_COLORS = {
  Solved: {
    color: "#16A34A",
    bgcolor: "#ECFDF3",
    borderColor: "#BBF7D0",
  },
  "In Progress": {
    color: "#F59E0B",
    bgcolor: "#FFFBEB",
    borderColor: "#FDE68A",
  },
  "Not Addressed": {
    color: "#DC2626",
    bgcolor: "#FEF2F2",
    borderColor: "#FECACA",
  },
} satisfies Record<
  MinistryRgcDecisionStatus,
  { color: string; bgcolor: string; borderColor: string }
>;

const DARK_COLORS = {
  Solved: {
    color: "#86EFAC",
    bgcolor: "rgba(22, 163, 74, 0.16)",
    borderColor: "rgba(134, 239, 172, 0.36)",
  },
  "In Progress": {
    color: "#FCD34D",
    bgcolor: "rgba(245, 158, 11, 0.16)",
    borderColor: "rgba(252, 211, 77, 0.38)",
  },
  "Not Addressed": {
    color: "#FCA5A5",
    bgcolor: "rgba(220, 38, 38, 0.16)",
    borderColor: "rgba(252, 165, 165, 0.38)",
  },
} satisfies Record<
  MinistryRgcDecisionStatus,
  { color: string; bgcolor: string; borderColor: string }
>;

export function MinistryRgcDecisionStatusChip({
  status,
}: {
  status: MinistryRgcDecisionStatus;
}) {
  const theme = useTheme();
  const colors =
    theme.palette.mode === "dark"
      ? DARK_COLORS[status]
      : LIGHT_COLORS[status];

  return (
    <Chip
      label={status}
      variant="outlined"
      sx={{
        minWidth: 88,
        height: 20,
        color: `${colors.color} !important`,
        bgcolor: colors.bgcolor,
        borderColor: colors.borderColor,
        borderRadius: 99,
        fontSize: 10,
        fontWeight: 700,
        "& .MuiChip-label": {
          px: 1.2,
        },
      }}
    />
  );
}

export default MinistryRgcDecisionStatusChip;