'use client'
import { useState } from 'react'
import { Button } from '@/components/ui/button'
import { Github } from 'lucide-react'

interface GitHubSignInButtonProps {
  className?: string
  disabled?: boolean
}

export function GitHubSignInButton({ className, disabled }: GitHubSignInButtonProps) {
  const [isLoading, setIsLoading] = useState(false)

  const handleGitHubSignIn = async () => {
    try {
      setIsLoading(true)

      // Get GitHub OAuth URL from our API
      const response = await fetch('/api/auth/github')
      const data = await response.json()

      if (data.success && data.data.authURL) {
        // Redirect to GitHub OAuth
        window.location.href = data.data.authURL
      } else {
        console.error('Failed to get GitHub auth URL:', data.error)
      }
    } catch (error) {
      console.error('GitHub sign-in error:', error)
    } finally {
      setIsLoading(false)
    }
  }

  return (
    <Button
      type="button"
      variant="outline"
      onClick={handleGitHubSignIn}
      disabled={disabled || isLoading}
      className={className}
    >
      <Github className="w-4 h-4 mr-2" />
      {isLoading ? 'Signing in...' : 'Continue with GitHub'}
    </Button>
  )
}