import React from 'react';
import { useAuth } from '@avanzacast/shared-hooks';

interface AuthButtonProps {
  className?: string;
  loginUrl?: string;
  dashboardUrl?: string;
  variant?: 'primary' | 'secondary' | 'ghost';
  size?: 'sm' | 'md' | 'lg';
}

/**
 * Componente compartido para botón de autenticación
 * Muestra "Iniciar sesión" o información del usuario según el estado de auth
 */
export function AuthButton({ 
  className = '', 
  loginUrl = '/auth/login',
  dashboardUrl = '/broadcasts',
  variant = 'primary',
  size = 'md'
}: AuthButtonProps) {
  const { user, isAuthenticated, logout } = useAuth();

  const baseClasses = 'inline-flex items-center justify-center font-medium transition-colors rounded-lg';
  
  const variantClasses = {
    primary: 'bg-blue-600 text-white hover:bg-blue-700',
    secondary: 'bg-white text-blue-600 border-2 border-blue-600 hover:bg-blue-50',
    ghost: 'text-gray-700 hover:text-gray-900 hover:bg-gray-100',
  };

  const sizeClasses = {
    sm: 'px-3 py-1.5 text-sm',
    md: 'px-4 py-2 text-base',
    lg: 'px-6 py-3 text-lg',
  };

  const classes = `${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${className}`;

  if (isAuthenticated && user) {
    return (
      <div className="flex items-center gap-3">
        {/* Avatar y nombre del usuario */}
        <a 
          href={dashboardUrl}
          className="flex items-center gap-2 hover:opacity-80 transition-opacity"
        >
          <div className="w-8 h-8 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white font-semibold text-sm">
            {user.name.charAt(0).toUpperCase()}
          </div>
          <span className="text-sm font-medium text-gray-700 hidden md:inline">
            {user.name}
          </span>
        </a>

        {/* Botón de logout */}
        <button
          onClick={logout}
          className="text-sm text-gray-600 hover:text-gray-900 transition-colors"
          aria-label="Cerrar sesión"
        >
          <svg 
            className="w-5 h-5" 
            fill="none" 
            stroke="currentColor" 
            viewBox="0 0 24 24"
          >
            <path 
              strokeLinecap="round" 
              strokeLinejoin="round" 
              strokeWidth={2} 
              d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" 
            />
          </svg>
        </button>
      </div>
    );
  }

  return (
    <a href={loginUrl} className={classes}>
      Iniciar sesión
    </a>
  );
}