"use client";

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

type Props = {
  title: string;
  count: string | number;
  subtitle: string;
};

export function MeetingRequestsHeader({ title, subtitle }: Props) {
  const theme = useTheme();
  const isDark = theme.palette.mode === "dark";

  return (
    <Box sx={{ mb: 4 }}>
      <Typography
        component="h1"
        sx={{
          color: isDark ? "#f3f4f6" : "#181d27",
          fontSize: { xs: 28, md: 32 },
          fontWeight: 600,
          lineHeight: 1.05,
          letterSpacing: "-0.02em",
        }}
      >
        {title}
      </Typography>

      <Typography
        sx={{
          mt: 1.25,
          color: isDark ? "#a4a7ae" : "#717680",
          fontSize: 12,
          fontWeight: 500,
          lineHeight: 1,
        }}
      >
        {subtitle}
      </Typography>
    </Box>
  );
}