import { FC } from 'react';

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

import ArrowLeftIcon from 'src/icons/ArrowLeft';
import { useLokaliseTranslation } from 'src/utils/i18n';

export type PolicyDescriptionProps = {
  open: boolean;
  onClose: (param) => void;
  description: string;
};

const PolicyDescription: FC<PolicyDescriptionProps> = props => {
  const { open, onClose, description } = props;

  const handleOnCloseDrawer = e => {
    onClose(e);
  };
  const { t } = useLokaliseTranslation('time_off');

  return (
    <Drawer
      anchor="right"
      open={open}
      onClose={handleOnCloseDrawer}
      sx={{
        zIndex: 1300,
        '& .MuiPaper-root': {
          borderTopLeftRadius: 16,
          borderBottomLeftRadius: 16,
        },
      }}
    >
      <Stack sx={{ width: '360px', mt: 4, mx: 3 }}>
        <Stack
          sx={{
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'space-between',
          }}
        >
          <Stack
            sx={{
              flexDirection: 'row',
              alignItems: 'center',
              gap: 1,
            }}
          >
            <IconButton
              aria-label={t('BACK')}
              onClick={onClose}
            >
              <ArrowLeftIcon fontSize="small" />
            </IconButton>
            <Typography variant="h6">{t('POLICY_DESCRIPTION')}</Typography>
          </Stack>
          <IconButton
            aria-label={t('CLOSE')}
            onClick={handleOnCloseDrawer}
          >
            <CloseIcon />
          </IconButton>
        </Stack>
        <Typography
          sx={{ mt: 3, whiteSpace: 'pre-line' }}
          variant="body2"
        >
          {description}
        </Typography>
      </Stack>
    </Drawer>
  );
};

export default PolicyDescription;
