import { Box, Divider, Stack, SxProps, Typography } from '@mui/material';

interface HeaderProps {
  sx?: SxProps;
  children: React.ReactNode;
}

function Header(props: HeaderProps) {
  const { sx } = props;
  return (
    <Box>
      <Stack
        alignItems="center"
        bgcolor="background.paper"
        direction="row"
        px={2.5}
        py={2}
        spacing={2}
        minHeight={'64px'}
        sx={sx}
      >
        {props.children}
      </Stack>
      <Divider sx={{ opacity: 0.6 }} />
    </Box>
  );
}

interface HeaderTextProps {
  primary?: React.ReactNode;
  secondary?: React.ReactNode;
}

function HeaderText(props: HeaderTextProps) {
  const { primary, secondary } = props;

  return (
    <Box display="inline-flex" flexGrow={1} flexShrink={1} flexDirection={'column'}>
      {primary ? <Typography variant="h5">{primary}</Typography> : null}
      {secondary ? <Typography variant="h6">{secondary}</Typography> : null}
    </Box>
  );
}

interface HeaderActionProps {
  children: React.ReactNode;
}

function HeaderAction(props: HeaderActionProps) {
  return (
    <Box display="inline-flex" flexGrow={0} flexShrink={0}>
      {props.children}
    </Box>
  );
}

export { Header, HeaderAction, HeaderText };