import { FC, PropsWithChildren } from 'react';

import HuAccordion from '@material-hu/components/design-system/Accordion';
import { AccordionProps } from '@material-hu/components/design-system/Accordion';

export type GeneralFilterAccordionProps = {
  label: string;
  accordionProps?: Partial<AccordionProps>;
};

const VacationsFilterAccordion: FC<
  PropsWithChildren<GeneralFilterAccordionProps>
> = props => {
  const { label, children, accordionProps } = props;

  return (
    <HuAccordion
      elevation={0}
      sx={{
        backgroundColor: theme => theme.palette.new.background.elements.grey,
        mb: 1,
        '& .MuiStack-root': { pt: 0 },
      }}
      disableGutters
      {...accordionProps}
      title={label}
      customDetail={children}
    ></HuAccordion>
  );
};

export default VacationsFilterAccordion;
