"use client";

import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";

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

export function ProgressReportHeader() {
  return (
    <Box
      sx={{
        display: "flex",
        flexWrap: "wrap",
        alignItems: { xs: "flex-start", md: "flex-end" },
        justifyContent: "space-between",
        gap: 2,
      }}
    >
      <Box sx={{ display: "flex", flexDirection: "column", gap: "15px" }}>
        <Typography
          sx={{
            color: "var(--mr-text)",
            fontSize: 32,
            fontWeight: 600,
            lineHeight: 1,
            letterSpacing: "-0.64px",
          }}
        >
          All Progress Report
        </Typography>

        <Typography
          sx={{
            color: "var(--mr-muted)",
            fontSize: 12,
            fontWeight: 500,
            lineHeight: 1,
          }}
        >
          Progress Reports
        </Typography>
      </Box>

      <ExportButton>Export as xlsx</ExportButton>
    </Box>
  );
}