import { IconCheck } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';

import HuAvatar from '@material-hu/components/design-system/Avatar';
import HuDialog from '@material-hu/components/design-system/Dialog';
import HuTitle from '@material-hu/components/design-system/Title';

import { useLokaliseTranslation } from 'src/utils/i18n';

type NpsFeedbackSuccessDialogProps = {
  onCloseModal: () => void;
};

const NpsFeedbackSuccessDialog = ({
  onCloseModal,
}: NpsFeedbackSuccessDialogProps) => {
  const { t } = useLokaliseTranslation(['backoffice_only']);

  return (
    <HuDialog
      title={t(
        'backoffice_only:nps_feedback_dialog.nps_feedback_submitted_title',
      )}
      body={
        <Stack sx={{ gap: 2, px: 4, width: '100%', alignItems: 'center' }}>
          <HuAvatar
            Icon={IconCheck}
            color="success"
            size="large"
          />
          <HuTitle
            title={t(
              'backoffice_only:nps_feedback_dialog.nps_feedback_submitted_body',
            )}
            variant="S"
            centered
          />
        </Stack>
      }
      onClose={onCloseModal}
      primaryButtonProps={{
        children: t('general:exit'),
        onClick: onCloseModal,
      }}
    />
  );
};

export default NpsFeedbackSuccessDialog;