'use client';

interface QRScreenProps {
  qrPng: string;
  status: string;
}

export function QRScreen({ qrPng, status }: QRScreenProps) {
  const steps = [
    { num: 1, text: 'Abre WhatsApp en tu teléfono' },
    { num: 2, text: 'Ve a Ajustes → Dispositivos vinculados' },
    { num: 3, text: 'Toca "Vincular un dispositivo" y escanea el código' },
  ];

  return (
    <>
      <div className="backdrop" aria-hidden="true"></div>
      <div id="screen-qr" className="screen active">
        <div className="auth-wrap">
          <div className="auth-card panel" style={{ maxWidth: '460px' }}>
            <h2 className="auth-title">Vincular WhatsApp</h2>
            <p className="auth-sub">Escanea el código desde tu teléfono</p>
            
            <div className="qr-frame">
              <div className="qr-scan"></div>
              {qrPng ? (
                <img
                  src={qrPng}
                  alt="WhatsApp QR Code"
                  style={{ display: 'block', width: '200px', height: '200px', background: 'white' }}
                />
              ) : (
                <div className="qr-placeholder" title="Esperando QR..."></div>
              )}
            </div>
            
            <ol className="steps">
              {steps.map((step) => (
                <li key={step.num}>
                  <span className="num">{step.num}</span> <span>{step.text}</span>
                </li>
              ))}
            </ol>

            {status === 'connecting' && (
              <div style={{ color: 'var(--accent)', fontSize: '0.8rem', fontWeight: 700, textAlign: 'center', marginTop: '16px' }}>
                ⚡ Procesando conexión...
              </div>
            )}
          </div>
        </div>
      </div>
    </>
  );
}