"use client";

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

import { WorkingGroupActions } from "@/features/ministry/dashboard/components/dashboard-actions";

export function WorkingGroupHeader() {
  const theme = useTheme();

  return (
    <Box
      sx={{
        display: "flex",
        flexWrap: "wrap",
        alignItems: { xs: "flex-start", md: "flex-start" },
        justifyContent: "space-between",
        gap: 2,
      }}
    >
      <Box>
        <Typography
          sx={{
            color: theme.palette.text.primary,
            fontSize: { xs: 34, md: 40 },
            fontWeight: 700,
            lineHeight: 1,
          }}
        >
          Dashboard
        </Typography>

        <Typography
          sx={{
            mt: 1.25,
            color: theme.palette.text.secondary,
            fontSize: 14,
          }}
        >
          Monitor G-PSF implementation. Use filters and click charts to drill down.
        </Typography>
      </Box>

      <WorkingGroupActions />
    </Box>
  );
}