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

import Button from '@material-hu/components/design-system/Buttons/Button';
import HuTitle from '@material-hu/components/design-system/Title';

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

type ReceivedConfirmationProps = {
  fullName: string;
  onAccept: () => void;
  isConfirming: boolean;
};

const ReceivedConfirmation = (props: ReceivedConfirmationProps) => {
  const { fullName, onAccept, isConfirming } = props;
  const { t } = useLokaliseTranslation('performance');

  return (
    <Paper
      variant="outlined"
      sx={{
        width: '100%',
        maxWidth: 720,
        borderRadius: 2,
        p: 3,
        boxSizing: 'border-box',
      }}
    >
      <Stack sx={{ alignItems: 'center', gap: 2 }}>
        <HuTitle
          variant="M"
          title={t('confirmation.title')}
        />
        <Typography
          variant="body1"
          color="text.secondary"
        >
          {t('confirmation.term', { name: fullName })}
        </Typography>
        <Button
          variant="contained"
          onClick={onAccept}
          sx={{ mt: 2 }}
          loading={isConfirming}
        >
          {t('confirmation.button')}
        </Button>
      </Stack>
    </Paper>
  );
};

export default ReceivedConfirmation;