import { useAutoRegeneration } from '@camarauth/sdk/react';

function AuthComponent() {
  const { 
    count, 
    hasReachedMax, 
    increment, 
    reset 
  } = useAutoRegeneration({
    maxRegenerations: 3,
    onMaxReached: () => alert('Máximo de intentos alcanzado'),
    onRegenerate: (count) => console.log(`Regeneración ${count}`)
  });

  const handleRegenerate = () => {
    const success = increment();
    if (success) {
      // Generar nuevo PIN
    }
  };

  return (
    <div>
      <p>Regeneraciones: {count}/3</p>
      {hasReachedMax && <p>¡Límite alcanzado!</p>}
      <button onClick={handleRegenerate} disabled={hasReachedMax}>
        Regenerar
      </button>
      <button onClick={reset}>Resetear</button>
    </div>
  );
}

import { useState } from 'react';
import { useAutoRegeneration, usePinGenerator } from '@camarauth/sdk/react';

function LimitedAuth() {
  const [pin, setPin] = useState('');
  const [emojis, setEmojis] = useState('');
  
  const { pin: newPin, emojis: newEmojis, regenerate } = usePinGenerator();
  
  const { 
    count, 
    hasReachedMax, 
    increment, 
    reset 
  } = useAutoRegeneration({
    maxRegenerations: 5,
    onMaxReached: () => {
      console.warn('Usuario alcanzó máximo de regeneraciones');
    }
  });

  const handleGenerate = () => {
    const result = regenerate();
    setPin(result.pin);
    setEmojis(result.emojiString);
  };

  const handleRegenerate = () => {
    if (increment()) {
      const result = regenerate();
      setPin(result.pin);
      setEmojis(result.emojiString);
    }
  };

  return (
    <div className="limited-auth">
      <div className="pin-display">
        {pin ? (
          <>
            <div className="emojis">{emojis}</div>
            <div className="progress">
              Regeneraciones: {count}/5
              <div className="progress-bar">
                <div 
                  className="progress-fill" 
                  style={{ width: `${(count / 5) * 100}%` }}
                />
              </div>
            </div>
          </>
        ) : (
          <button onClick={handleGenerate}>
            Generar PIN
          </button>
        )}
      </div>
      
      <div className="actions">
        <button 
          onClick={handleRegenerate}
          disabled={hasReachedMax}
        >
          {hasReachedMax ? 'Límite alcanzado' : 'Regenerar'}
        </button>
        
        <button onClick={() => {
          reset();
          setPin('');
          setEmojis('');
        }}>
          Comenzar de nuevo
        </button>
      </div>
    </div>
  );
}