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

function PinDisplay() {
  const { pin, emojis, emojiString, regenerate } = usePinGenerator({
    length: 6
  });

  return (
    <div>
      <p>PIN: {pin}</p>
      <p>Emojis: {emojiString}</p>
      <button onClick={regenerate}>Regenerar</button>
    </div>
  );
}

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

function CustomAuth() {
  const { pin, emojis, emojiString, regenerate } = usePinGenerator({
    length: 8,
    characters: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'
  });

  const handleShare = () => {
    // Compartir emojis por WhatsApp
    const message = `Mi PIN es: ${emojiString}`;
    const whatsappLink = `https://wa.me/?text=${encodeURIComponent(message)}`;
    window.open(whatsappLink, '_blank');
  };

  return (
    <div className="pin-generator">
      <div className="emojis-display">
        {emojis.map((emoji, index) => (
          <span key={index} className="emoji">{emoji}</span>
        ))}
      </div>
      
      <p className="pin-hint">
        Tu código: {pin}
      </p>
      
      <div className="actions">
        <button onClick={regenerate}>
          🔄 Nuevo código
        </button>
        
        <button onClick={handleShare}>
          📱 Compartir
        </button>
      </div>
    </div>
  );
}