import * as React from 'react';

import { Button, Confirmation, CloseButton } from '@nova-hf/ui';

import s from './ProfileConfirmation.module.scss';
import classNames from 'classnames/bind';

const cn = classNames.bind(s);

interface IProfileConfirmationProps {
  color: string;
  title: string;
  description: string;
  icon: object;
  errorMessage: string;
  buttonLoading: boolean;
  buttonText: string;
  onClick: () => void;
  onCancel?: () => void;
  posCenter: boolean;
}

export const ProfileConfirmation = ({
  color,
  title,
  description,
  icon,
  errorMessage,
  buttonLoading,
  buttonText,
  onClick,
  onCancel,
  posCenter,
}: IProfileConfirmationProps) => {
  return (
    <div className={cn(s.profileConfirmation, { posCenter })}>
      <div className={s.profileConfirmation__confirmation}>
        <Confirmation
          title={title}
          description={description}
          icon={icon}
          errorMessage={errorMessage}
        />
      </div>

      <div className={s.profileConfirmation__button}>
        <Button background={color} loading={buttonLoading} onClick={onClick} fill>
          {buttonText}
        </Button>
      </div>

      {onCancel && (
        <div className={s.profileConfirmation__closeButton}>
          <CloseButton onClick={onCancel} />
        </div>
      )}
    </div>
  );
};