import { Box } from '@mui/material';
import clsx from 'clsx';
import { memo, PropsWithChildren } from 'react';

import css from './Bar.module.scss';

export interface BarProps {
  /** Additional CSS classes to apply to the Bar component */
  classes?: string | string[];
}

/**
 * Constructs a horizontal Bar section using pre-defined Rijkswaterstaat styling
 * @example
 * ```jsx
 * <Bar>
 *   <div> Some Children </div>
 * </Bar>
 * ```
 */
export const Bar = memo(({ classes, children, ...props }: PropsWithChildren<BarProps>) => (
  <Box {...props} component='div' className={clsx(css.bar, classes)}>
    {children}
  </Box>
));