import { FC } from 'react';

import Stack from '@material-hu/mui/Stack';

import useHuGoTheme from 'src/hooks/useHuGoTheme';
import { CriteriaToSelect as CriteriaToSelectType } from 'src/types/vacations';

import { CriteriaCard } from './CriteriaSelectionDrawers/CriteriaCard';

type CriteriaToSelectProps = {
  criterias: CriteriaToSelectType[];
};

const CriteriaToSelect: FC<CriteriaToSelectProps> = props => {
  const { criterias } = props;
  const HuGoThemeProvider = useHuGoTheme();

  return (
    <HuGoThemeProvider>
      <Stack sx={{ width: '100%', gap: 2 }}>
        {criterias.map(elem => (
          <CriteriaCard
            key={elem.title}
            criteria={elem}
            onClick={elem.onClick}
          />
        ))}
      </Stack>
    </HuGoThemeProvider>
  );
};

export default CriteriaToSelect;