import { FC } from 'react';

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

import HuDrawer from '@material-hu/components/design-system/Drawer';

import { PolicyTypes } from 'src/types/vacations';
import { useLokaliseTranslation } from 'src/utils/i18n';

import PolicyTypesDetailItem from './PolicyTypesDetailItem';

export type PolicyTypesDetailProps = {
  open: boolean;
  onClose: () => void;
  policyTypes: PolicyTypes[];
};

const PolicyTypesDetail: FC<PolicyTypesDetailProps> = props => {
  const { open, onClose, policyTypes } = props;

  const { t } = useLokaliseTranslation('time_off');

  return (
    <HuDrawer
      open={open}
      onClose={onClose}
      title={t('REQUEST_TYPE_OTHER')}
    >
      <Stack sx={{ gap: 2 }}>
        {policyTypes.map(policyType => (
          <PolicyTypesDetailItem
            key={policyType.id}
            policyType={policyType}
          />
        ))}
      </Stack>
    </HuDrawer>
  );
};

export default PolicyTypesDetail;
