import { Stack, Typography } from '@mui/material';
import type { ReactNode } from 'react';

type Props = {
  title: string | ReactNode;
  children?: ReactNode;
  action?: ReactNode;
  mb?: number;
  mt?: number;
};

export default function SectionHeader({ title, children = null, action = null, mb = 1.5, mt = 1.5 }: Props) {
  return (
    <Stack
      className="section-header"
      direction="row"
      sx={{
        justifyContent: 'space-between',
        alignItems: 'center',
        flexWrap: 'wrap',
        gap: 1,
        mb,
        mt,
        pb: 1,
      }}>
      <Typography
        variant="h3"
        sx={{
          fontSize: {
            xs: '18px',
            md: '1.09375rem',
          },
        }}
        component="div">
        {title}
      </Typography>
      {action || children}
    </Stack>
  );
}
