import type { ReactNode } from "react";

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

type CdcIssueMatrixDetailSectionProps = {
  children?: ReactNode;
  isDark: boolean;
  isEmpty?: boolean;
  title: string;
};

export function CdcIssueMatrixDetailSection({
  children,
  isDark,
  isEmpty = false,
  title,
}: CdcIssueMatrixDetailSectionProps) {
  const hasContent =
    !isEmpty &&
    children !== undefined &&
    children !== null &&
    (typeof children !== "string" || children.trim().length > 0);

  return (
    <Box>
      <Typography
        sx={{
          color: isDark ? alpha("#ffffff", 0.9) : "#414651",
          fontSize: 16,
          fontWeight: 700,
          lineHeight: 1.35,
        }}
      >
        {title}
      </Typography>

      <Box
        sx={{
          mt: 2,
          px: 2.5,
          py: hasContent ? 2.5 : 0,
          minHeight: hasContent ? undefined : 56,
          borderRadius: "8px",
          border: `1px solid ${isDark ? alpha("#ffffff", 0.12) : "#e4e4e4"}`,
          bgcolor: isDark ? alpha("#ffffff", 0.04) : "#f5f5f5",
          display: "flex",
          alignItems: hasContent ? "flex-start" : "center",
        }}
      >
        {hasContent ? (
          <Typography
            sx={{
              color: isDark ? alpha("#ffffff", 0.88) : "#181d27",
              fontSize: 13,
              fontWeight: 500,
              lineHeight: 1.55,
              whiteSpace: "pre-wrap",
              width: "100%",
            }}
          >
            {children}
          </Typography>
        ) : null}
      </Box>
    </Box>
  );
}