import type { ReactNode } from "react";

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

export function IssueViewDetailField({
  children,
  icon,
  isDark,
  label,
  labelWidth = 150,
}: {
  children: ReactNode;
  icon: ReactNode;
  isDark: boolean;
  label: string;
  labelWidth?: number;
}) {
  return (
    <Box
      sx={{
        minWidth: 0,
        display: "grid",
        gridTemplateColumns: {
          xs: "1fr",
          sm: `${labelWidth}px minmax(0, 1fr)`,
        },
        alignItems: "center",
        columnGap: 1.5,
        rowGap: 0.75,
      }}
    >
      <Box
        sx={{
          display: "flex",
          alignItems: "center",
          gap: 1,
          minWidth: 0,
          color: isDark ? alpha("#ffffff", 0.62) : "#717680",
          "& svg": {
            width: 20,
            height: 20,
          },
        }}
      >
        {icon}
        <Typography
          sx={{
            color: "inherit",
            fontSize: 13,
            fontWeight: 400,
            lineHeight: 1.4,
            whiteSpace: "nowrap",
          }}
        >
          {label} :
        </Typography>
      </Box>

      <Box
        sx={{
          minWidth: 0,
          display: "flex",
          alignItems: "center",
          minHeight: 24,
        }}
      >
        {children}
      </Box>
    </Box>
  );
}

export function IssueViewDetailValue({
  children,
  isDark,
}: {
  children: ReactNode;
  isDark: boolean;
}) {
  return (
    <Typography
      sx={{
        color: isDark ? alpha("#ffffff", 0.88) : "#252b37",
        fontSize: 13,
        fontWeight: 500,
        lineHeight: 1.45,
        minHeight: 24,
        display: "flex",
        alignItems: "center",
      }}
    >
      {children}
    </Typography>
  );
}