// app/components/auth/SocialLoginButtons.tsx
import { FC } from 'react';
import { Chrome } from 'lucide-react';

interface SocialLoginButtonsProps {
  onLogin: (provider: string) => void;
  variant?: 'login' | 'signup';
  isLoading?: boolean;
  loadingProvider?: string | null;
}

const SocialLoginButtons: FC<SocialLoginButtonsProps> = ({ 
  onLogin, 
  variant = 'login',
  isLoading = false,
  loadingProvider = null
}) => {
  const buttons = [
    {
      provider: 'google',
      icon: <Chrome className="h-5 w-5" />,
      text: variant === 'login' ? 'Continue with Google' : 'Sign up with Google',
      className: 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50 hover:border-gray-400 active:bg-gray-100',
      iconClassName: 'text-blue-500',
      ringColor: 'focus:ring-blue-500',
      bgColor: 'bg-white',
    }
    // Add other providers later
  ];

  return (
    <div className="space-y-3">
      {buttons.map((button) => {
        const isProviderLoading = loadingProvider === button.provider;
        
        return (
          <button
            key={button.provider}
            type="button"
            onClick={() => onLogin(button.provider)}
            disabled={isLoading || isProviderLoading}
            className={`
              w-full flex items-center justify-center py-3 px-4 border rounded-lg 
              shadow-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 
              ${button.ringColor} transition-all duration-200 
              hover:shadow-md active:scale-[0.98] 
              ${button.className} 
              disabled:opacity-50 disabled:cursor-not-allowed
            `}
          >
            <span className={`mr-3 ${button.iconClassName}`}>
              {isProviderLoading ? (
                <svg className="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                </svg>
              ) : (
                button.icon
              )}
            </span>
            {button.text}
          </button>
        );
      })}
    </div>
  );
};

export default SocialLoginButtons;