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

import { BackIcon } from "@/features/pswg/working-group-issues/components/view-detail/_components/issue-detail-icons";

type CdcIssueMatrixDetailHeaderProps = {
  backLabel: string;
  breadcrumbCurrent: string;
  breadcrumbParent: string;
  isDark: boolean;
  onBack: () => void;
  title: string;
};

export function CdcIssueMatrixDetailHeader({
  backLabel,
  breadcrumbCurrent,
  breadcrumbParent,
  isDark,
  onBack,
  title,
}: CdcIssueMatrixDetailHeaderProps) {
  return (
    <>
      <Box
        sx={{
          minHeight: { xs: 72, sm: 95 },
          display: "flex",
          alignItems: "center",
          gap: { xs: 2, sm: 3 },
        }}
      >
        <ButtonBase
          onClick={onBack}
          aria-label={backLabel}
          sx={{
            display: "flex",
            alignItems: "center",
            gap: 1,
            color: isDark ? alpha("#ffffff", 0.66) : "#717680",
            borderRadius: "100px",
            py: 1.25,
            px: 1.25,
            flexShrink: 0,
            "&:hover": {
              color: isDark ? "#ffffff" : "#2584ce",
              bgcolor: "transparent",
            },
          }}
        >
          <BackIcon />
          <Typography
            sx={{
              color: "inherit",
              fontSize: 13,
              fontWeight: 500,
              lineHeight: 1.4,
            }}
          >
            {backLabel}
          </Typography>
        </ButtonBase>

        <Box sx={{ minWidth: 0 }}>
          <Typography
            component="h1"
            sx={{
              color: isDark ? "#ffffff" : "#0a0a0a",
              fontSize: 18,
              fontWeight: 500,
              lineHeight: 1.35,
              letterSpacing: "-0.36px",
            }}
          >
            {title}
          </Typography>
          <Typography
            sx={{
              mt: 1.25,
              color: isDark ? alpha("#ffffff", 0.58) : "#717680",
              fontSize: 12,
              fontWeight: 500,
              lineHeight: 1.4,
            }}
          >
            {breadcrumbParent}{" "}
            <Box
              component="span"
              sx={{ color: isDark ? alpha("#ffffff", 0.82) : "#414651" }}
            >
              / {breadcrumbCurrent}
            </Box>
          </Typography>
        </Box>
      </Box>

      <Divider
        sx={{
          mt: 1.5,
          mb: 2.5,
          borderColor: isDark ? alpha("#ffffff", 0.12) : "#d5d9e2",
        }}
      />
    </>
  );
}