import type { KycResponse } from '@features/kyc/api/kycApi'
import styles from './KycModal.module.css'

interface Props {
  data: KycResponse
  onClose: () => void
}

export function KycModal({ data, onClose }: Props) {
  return (
    <div className={styles.backdrop} onClick={onClose}>
      <div className={styles.modal} onClick={e => e.stopPropagation()}>
        <button className={styles.closeBtn} onClick={onClose} type="button">×</button>
        <div className={styles.body}>
          <div className={styles.qrBlock}>
            <img
              className={styles.qrImage}
              src={`data:image/png;base64,${data.qr_code}`}
              alt="QR-код для верификации"
            />
            <a
              className={styles.linkBtn}
              href={data.link}
              target="_blank"
              rel="noopener noreferrer"
            >
              Перейти к верификации
            </a>
          </div>
          <p className={styles.infoText}>
            Для продолжения верификации перейдите по ссылке
          </p>
        </div>
      </div>
    </div>
  )
}