"use client";

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

import { useCdcGpsfMeetingCalendarI18n } from "@/features/cdc-gpsf/meeting-calendar/use-cdc-gpsf-meeting-calendar-i18n";

import { CdcGpsfMeetingCalendar } from "./cdc-gpsf-meeting-calendar";
import { CdcGpsfMeetingCalendarHeader } from "./cdc-gpsf-meeting-calendar-header";

export function CdcGpsfMeetingCalendarScreen() {
  const theme = useTheme();
  const language = useCdcGpsfMeetingCalendarI18n();

  return (
    <Box
      sx={{
        width: "100%",
        minWidth: 0,
        minHeight: "100%",
        px: { xs: 2, md: 3 },
        py: { xs: 2, md: 3 },
        color: theme.palette.text.primary,
      }}
    >
      <CdcGpsfMeetingCalendarHeader language={language} />

      <Box sx={{ mt: { xs: 2, md: 3 }, width: "100%", minWidth: 0 }}>
        <CdcGpsfMeetingCalendar language={language} />
      </Box>
    </Box>
  );
}