"use client";

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

import {
  rgcDecisionText,
  type RgcDecisionLanguage,
} from "../data/rgc-decision-i18n";

type RgcDecisionHeaderProps = {
  language: RgcDecisionLanguage;
};

export function RgcDecisionHeader({
  language,
}: RgcDecisionHeaderProps) {
  const theme = useTheme();

  const text =
    rgcDecisionText[language] ??
    rgcDecisionText.en;

  return (
    <Box
      sx={{
        mb: 3,
      }}
    >
      <Typography
        component="h1"
        sx={{
          mb: 0.75,
          color: theme.palette.text.primary,
          fontSize: {
            xs: 26,
            md: 32,
          },
          fontWeight: 700,
          lineHeight: 1.15,
        }}
      >
        {text.title}
      </Typography>

      <Typography
        sx={{
          color: theme.palette.text.secondary,
          fontSize: 12,
          fontWeight: 500,
        }}
      >
        {text.breadcrumb}
      </Typography>
    </Box>
  );
}

export default RgcDecisionHeader;