import { FC } from 'react';

import CloseIcon from '@material-hu/icons/material/Close';
import IconButton from '@material-hu/mui/IconButton';
import List from '@material-hu/mui/List';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import { fileFormats } from 'src/constants/serviceManagement';
import { useLokaliseTranslation } from 'src/utils/i18n';

export type AllowedAttachmentsModalProps = {
  onClose: () => void;
};

const AllowedAttachmentsModal: FC<AllowedAttachmentsModalProps> = ({
  onClose,
}) => {
  const { t } = useLokaliseTranslation('service_management');

  return (
    <Stack sx={{ p: 3 }}>
      <Stack
        sx={{
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'space-between',
        }}
      >
        <Typography variant="h6">{t('ALLOWED_FORMATS')}</Typography>
        <IconButton onClick={onClose}>
          <CloseIcon />
        </IconButton>
      </Stack>
      <List>
        {fileFormats.map(format => (
          <Typography
            key={format}
            variant="body1"
            color="secondary"
          >
            {t(format)}
          </Typography>
        ))}
      </List>
    </Stack>
  );
};

export default AllowedAttachmentsModal;