"use client";

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

import { useAppLanguage } from "@/components/providers/app-language-provider";

import {
  normalizePlenaryLanguage,
  plenaryText,
} from "../plenary-i18n";
import { PlenaryActions } from "./plenary-actions";

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

  const currentLanguage =
    normalizePlenaryLanguage(language);

  const text =
    plenaryText[currentLanguage];

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

        <Typography
          sx={{
            mt: 1.25,
            color:
              theme.palette.text.secondary,
            fontSize: 14,
            lineHeight: 1.5,
          }}
        >
          {text.dashboardSubtitle}
        </Typography>
      </Box>

      <Box
        sx={{
          flexShrink: 0,
          width: {
            xs: "100%",
            md: "auto",
          },
        }}
      >
        <PlenaryActions />
      </Box>
    </Box>
  );
}