import { AppBar, Box, Container, useScrollTrigger, useTheme } from '@mui/material';

type IHorizontalBarProps = React.PropsWithChildren;

function HorizontalBar(props: IHorizontalBarProps) {
  const theme = useTheme();
  const trigger = useScrollTrigger({
    disableHysteresis: true,
    threshold: 0
  });
  //@ts-ignore
  theme.shadows[4] = theme.customShadows.z1;

  return (
    <AppBar
      elevation={trigger ? 4 : 0}
      sx={{
        top: 60,
        bgcolor: theme.palette.background.paper,
        width: '100%',
        height: 62,
        justifyContent: 'center',
        borderTop: `1px solid ${theme.palette.divider}`,
        borderBottom: `1px solid ${theme.palette.divider}`,
        zIndex: 1098,
        color: theme.palette.grey[500]
      }}
    >
      <Container maxWidth={false}>
        <Box sx={{ display: 'flex', alignItems: 'center' }}>{props.children}</Box>
      </Container>
    </AppBar>
  );
}

export { HorizontalBar };