import { Button } from '@/components/ui/button';
import { Github, Chrome, MessageCircle } from 'lucide-react';

interface OAuthButtonsProps {
  onGoogleClick?: () => void;
  onGithubClick?: () => void;
  onDiscordClick?: () => void;
  disabled?: boolean;
}

export function OAuthButtons({
  onGoogleClick,
  onGithubClick,
  onDiscordClick,
  disabled = false,
}: OAuthButtonsProps) {
  const handleGoogle = () => {
    if (onGoogleClick) {
      onGoogleClick();
    } else {
      window.location.href = '/api/v1/auth/oauth/google';
    }
  };

  const handleGithub = () => {
    if (onGithubClick) {
      onGithubClick();
    } else {
      window.location.href = '/api/v1/auth/oauth/github';
    }
  };

  const handleDiscord = () => {
    if (onDiscordClick) {
      onDiscordClick();
    } else {
      window.location.href = '/api/v1/auth/oauth/discord';
    }
  };

  return (
    <div className="space-y-4">
      <div className="text-sm text-center text-kodo-content-dim mb-4">
        Or continue with
      </div>

      <div className="grid gap-4">
        <Button
          type="button"
          variant="outline"
          onClick={handleGoogle}
          disabled={disabled}
          className="w-full"
        >
          <Chrome className="mr-2 h-4 w-4" />
          Continue with Google
        </Button>

        <Button
          type="button"
          variant="outline"
          onClick={handleGithub}
          disabled={disabled}
          className="w-full"
        >
          <Github className="mr-2 h-4 w-4" />
          Continue with GitHub
        </Button>

        <Button
          type="button"
          variant="outline"
          onClick={handleDiscord}
          disabled={disabled}
          className="w-full"
        >
          <MessageCircle className="mr-2 h-4 w-4" />
          Continue with Discord
        </Button>
      </div>
    </div>
  );
}