import { Stack, useTheme } from '@mui/material';

import { type HeaderContainerProps } from './types';

const HeaderContainer = ({ children, slotProps }: HeaderContainerProps) => {
  const theme = useTheme();

  return (
    <Stack
      component="header"
      {...slotProps?.root}
      sx={{
        flexDirection: 'row',
        alignItems: 'center',
        px: 2,
        py: 1.5,
        backgroundColor: theme.palette.new.background.layout.tertiary,
        justifyContent: 'space-between',
        gap: 1,
        ...slotProps?.root?.sx,
      }}
    >
      {children}
    </Stack>
  );
};

export default HeaderContainer;
