import type { ReactNode } from "react";

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

type IssueViewDetailContentSectionProps = {
  children: ReactNode;
  isDark: boolean;
  marginTop?: number;
  title: string;
};

export function IssueViewDetailContentSection({
  children,
  isDark,
  marginTop = 3,
  title,
}: IssueViewDetailContentSectionProps) {
  return (
    <Box sx={{ mt: marginTop }}>
      <Typography
        sx={{
          color: isDark ? "#ffffff" : "#181d27",
          fontSize: 18,
          fontWeight: 700,
          lineHeight: 1.35,
        }}
      >
        {title}
      </Typography>

      <Box
        sx={{
          mt: 1.25,
          px: { xs: 2, md: 2.5 },
          py: 2,
          borderRadius: "8px",
          bgcolor: isDark ? alpha("#ffffff", 0.04) : "#f5f5f5",
        }}
      >
        <Typography
          sx={{
            color: isDark ? alpha("#ffffff", 0.82) : "#535862",
            fontSize: 14,
            fontWeight: 400,
            lineHeight: 1.55,
            whiteSpace: "pre-wrap",
          }}
        >
          {children}
        </Typography>
      </Box>
    </Box>
  );
}