import type { ReactNode } from "react";

import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import { alpha } from "@mui/material/styles";

type CdcIssueMatrixDetailFieldProps = {
  children: ReactNode;
  icon: ReactNode;
  isDark: boolean;
  label: string;
  labelWidth: number;
};

export function CdcIssueMatrixDetailField({
  children,
  icon,
  isDark,
  label,
  labelWidth,
}: CdcIssueMatrixDetailFieldProps) {
  return (
    <Box
      sx={{
        width: "100%",
        minWidth: 0,
        display: "grid",
        gridTemplateColumns: {
          xs: "1fr",
          sm: `${labelWidth}px minmax(0, 1fr)`,
        },
        alignItems: "center",
        columnGap: { xs: 1.5, sm: 1.75 },
        rowGap: 0.75,
        minHeight: 27,
      }}
    >
      <Box
        sx={{
          display: "flex",
          alignItems: "center",
          gap: 1.375,
          color: isDark ? alpha("#ffffff", 0.62) : "#717680",
          minWidth: 0,
          "& svg": {
            width: 20,
            height: 20,
            flexShrink: 0,
          },
        }}
      >
        {icon}
        <Typography
          sx={{
            color: "inherit",
            fontSize: 13,
            fontWeight: 400,
            lineHeight: "22px",
            whiteSpace: "nowrap",
          }}
        >
          {label} :
        </Typography>
      </Box>

      <Box
        sx={{
          minWidth: 0,
          display: "flex",
          alignItems: "center",
          gridColumn: { xs: "1", sm: "auto" },
          pl: { xs: 3.5, sm: 0 },
        }}
      >
        {children}
      </Box>
    </Box>
  );
}

export function CdcIssueMatrixDetailValueSlot({
  children,
  leading,
}: {
  children: ReactNode;
  leading?: ReactNode;
}) {
  return (
    <Box
      sx={{
        display: "grid",
        gridTemplateColumns: "19px minmax(0, 1fr)",
        columnGap: 1,
        alignItems: "center",
        width: "100%",
        minWidth: 0,
      }}
    >
      <Box
        sx={{
          width: 19,
          height: 19,
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          flexShrink: 0,
        }}
      >
        {leading ?? null}
      </Box>
      <Box sx={{ minWidth: 0 }}>{children}</Box>
    </Box>
  );
}

export function CdcIssueMatrixDetailValue({
  children,
  isDark,
}: {
  children: ReactNode;
  isDark: boolean;
}) {
  return (
    <Typography
      sx={{
        color: isDark ? alpha("#ffffff", 0.88) : "#181d27",
        fontSize: 13,
        fontWeight: 500,
        lineHeight: 1.45,
      }}
    >
      {children}
    </Typography>
  );
}
