ui/src/components/HFLoginButton.tsx

'use client';

import classNames from 'classnames';
import { useAuth } from '@/contexts/AuthContext';

interface Props {
  className?: string;
  size?: 'sm' | 'md' | 'lg';
}

const BUTTON_ASSETS: Record<'sm' | 'md' | 'lg', string> = {
  sm: 'https://huggingface.co/datasets/huggingface/badges/resolve/main/sign-in-with-huggingface-sm-dark.svg',
  md: 'https://huggingface.co/datasets/huggingface/badges/resolve/main/sign-in-with-huggingface-md-dark.svg',
  lg: 'https://huggingface.co/datasets/huggingface/badges/resolve/main/sign-in-with-huggingface-lg-dark.svg',
};

export default function HFLoginButton({ className, size = 'md' }: Props) {
  const { loginWithOAuth, oauthAvailable, status } = useAuth();

  if (!oauthAvailable) {
    return null;
  }

  const disabled = status === 'checking';

  return (
    <button
      type="button"
      onClick={loginWithOAuth}
      disabled={disabled}
      className={classNames(
        'border border-gray-700 rounded-md bg-gray-900 hover:bg-gray-800 transition-colors inline-flex items-center justify-center p-2 disabled:opacity-60 disabled:cursor-not-allowed',
        className,
      )}
      aria-label="Sign in with Hugging Face"
    >
      <img
        src={BUTTON_ASSETS[size]}
        alt="Sign in with Hugging Face"
        className={classNames('block', {
          'h-16': size === 'lg',
          'h-14': size === 'md',
          'h-12': size === 'sm',
        })}
      />
    </button>
  );
}