"use client";

import Link from "next/link";

import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import { useTheme } from "@mui/material/styles";

import { AppSecondaryButton } from "@/components/ui/button";
import { ExportButton } from "@/components/ui/export-button";

import type { ProgressReportLabels } from "../../progress-report-i18n";

type ProgressReportDetailHeaderProps = {
  title: string;
  labels: ProgressReportLabels;
};

export function ProgressReportDetailHeader({
  title,
  labels,
}: ProgressReportDetailHeaderProps) {
  const theme = useTheme();

  return (
    <Box
      sx={{
        minHeight: { xs: "auto", md: 95 },
        display: "flex",
        alignItems: { xs: "flex-start", md: "center" },
        justifyContent: "space-between",
        flexDirection: { xs: "column", sm: "row" },
        gap: 2,
      }}
    >
      <Box
        sx={{
          display: "flex",
          alignItems: "center",
          gap: { xs: 1.5, md: "23px" },
          minWidth: 0,
        }}
      >
        <AppSecondaryButton
          component={Link}
          href="/cdc-gpsf/progress-reports"
          startIcon={<ArrowBackIosNewIcon sx={{ fontSize: 14 }} />}
          sx={{
            width: 104,
            minWidth: 104,
            height: 40,
            bgcolor: "transparent",
            borderColor: "transparent",
            color: theme.palette.text.secondary,
            "&:hover": {
              bgcolor: theme.palette.action.hover,
              borderColor: "transparent",
            },
          }}
        >
          {labels.detail.back}
        </AppSecondaryButton>

        <Box sx={{ minWidth: 0 }}>
          <Typography
            sx={{
              fontSize: 18,
              fontWeight: 600,
              lineHeight: "22px",
              color: theme.palette.text.primary,
            }}
          >
            {title}
          </Typography>

          <Typography
            noWrap
            sx={{
              mt: "4px",
              fontSize: 12,
              lineHeight: "15px",
              color: theme.palette.text.secondary,
            }}
          >
            {labels.breadcrumbParent} / {labels.breadcrumbCurrent} / {title}
          </Typography>
        </Box>
      </Box>

      <ExportButton
        compact
        aria-label={labels.exportButton}
        sx={{ width: 120, minWidth: 120, maxWidth: 120 }}
      >
        {labels.exportButton}
      </ExportButton>
    </Box>
  );
}