"use client";

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

import { ExportButton } from "@/components/ui/export-button";
import { useAppLanguage } from "@/components/providers/app-language-provider";
import {
  normalizeProgressReportLanguage,
  progressReportText,
} from "@/features/pswg/progress-report/progress-report-i18n";

export function ProgressReportHeader() {
  const theme = useTheme();
  const { language } = useAppLanguage();

  const progressReportLanguage = normalizeProgressReportLanguage(language);
  const text = progressReportText[progressReportLanguage];

  const isDark = theme.palette.mode === "dark";

  return (
    <Box
      sx={{
        display: "flex",
        flexWrap: "wrap",
        alignItems: { xs: "flex-start", md: "flex-end" },
        justifyContent: "space-between",
        gap: 2,
      }}
    >
      <Box>
        <Typography
          sx={{
            color: isDark ? "#f9fafb" : "#111827",
            fontSize: { xs: 30, md: 32 },
            fontWeight: 600,
            lineHeight: 1,
          }}
        >
          {text.pageTitle}
        </Typography>

        <Typography
          sx={{
            mt: 1.5,
            color: isDark ? "#9ca3af" : "#6b7280",
            fontSize: 14,
          }}
        >
          {text.pageSubtitle}
        </Typography>
      </Box>

      <ExportButton>{text.exportAsXlsx}</ExportButton>
    </Box>
  );
}