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

import { ExportButton } from "@/components/ui/export-button";
import {
  cdcGpsfMeetingRequestI18n,
  getCdcGpsfMeetingRequestFont,
  type CdcGpsfMeetingRequestUiLang,
} from "@/features/cdc-gpsf/meeting-requests/cdc-gpsf-meeting-request-i18n";

type CdcGpsfMeetingRequestsHeaderProps = {
  language?: CdcGpsfMeetingRequestUiLang;
};

export function CdcGpsfMeetingRequestsHeader({
  language = "km",
}: CdcGpsfMeetingRequestsHeaderProps) {
  const theme = useTheme();
  const isDark = theme.palette.mode === "dark";
  const t = cdcGpsfMeetingRequestI18n(language);

  return (
    <Box
      sx={{
        display: "flex",
        alignItems: { xs: "flex-start", md: "center" },
        justifyContent: "space-between",
        gap: { xs: 2, md: 3 },
        flexWrap: "nowrap",
        width: "100%",
        minHeight: { xs: "auto", md: 95 },
      }}
    >
      <Box
        sx={{
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
          gap: 1.875,
          minHeight: { xs: "auto", md: 95 },
          py: { xs: 0, md: 0.5 },
        }}
      >
        <Typography
          sx={{
            color: isDark ? "#ffffff" : "#0a0a0a",
            fontSize: { xs: 28, md: 32 },
            fontWeight: 600,
            lineHeight: 1,
            letterSpacing: "-0.02em",
            fontFamily: getCdcGpsfMeetingRequestFont(language),
          }}
        >
          {t.title}
        </Typography>

        <Typography
          sx={{
            color: isDark ? alpha("#ffffff", 0.72) : "#252b37",
            fontSize: 12,
            fontWeight: 500,
            lineHeight: 1,
            fontFamily: getCdcGpsfMeetingRequestFont(language),
          }}
        >
          {t.breadcrumb}
        </Typography>
      </Box>

      <Box
        sx={{
          display: "flex",
          alignItems: "center",
          flexShrink: 0,
          ml: "auto",
        }}
      >
        <ExportButton
          sx={{ fontFamily: getCdcGpsfMeetingRequestFont(language) }}
        >
          {t.exportAsXlsx}
        </ExportButton>
      </Box>
    </Box>
  );
}