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 {
  cdcGpsfMeetingCalendarI18n,
  getCdcGpsfMeetingCalendarFont,
  type CdcGpsfMeetingCalendarUiLang,
} from "@/features/cdc-gpsf/meeting-calendar/cdc-gpsf-meeting-calendar-i18n";

type CdcGpsfMeetingCalendarHeaderProps = {
  language?: CdcGpsfMeetingCalendarUiLang;
};

export function CdcGpsfMeetingCalendarHeader({
  language = "km",
}: CdcGpsfMeetingCalendarHeaderProps) {
  const theme = useTheme();
  const isDark = theme.palette.mode === "dark";
  const t = cdcGpsfMeetingCalendarI18n(language);

  return (
    <Box
      sx={{
        display: "flex",
        alignItems: { xs: "stretch", sm: "center" },
        justifyContent: "space-between",
        gap: { xs: 2, md: 3 },
        flexDirection: { xs: "column", sm: "row" },
        flexWrap: "wrap",
        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: getCdcGpsfMeetingCalendarFont(language),
          }}
        >
          {t.title}
        </Typography>

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

      <Box
        sx={{
          display: "flex",
          alignItems: "center",
          flexShrink: 0,
          ml: { xs: 0, sm: "auto" },
          alignSelf: { xs: "stretch", sm: "auto" },
          justifyContent: { xs: "flex-end", sm: "flex-start" },
        }}
      >
        <ExportButton
          showChevron={false}
          sx={{
            width: { xs: "100%", sm: 120 },
            minWidth: { xs: "auto", sm: 120 },
            fontFamily: getCdcGpsfMeetingCalendarFont(language),
          }}
        >
          {t.export}
        </ExportButton>
      </Box>
    </Box>
  );
}