'use client';

import { useAuth } from '@/providers/auth-provider';
import { Button } from '@repo/ui/components/button';
import { LogIn, Loader2 } from 'lucide-react';

interface LoginButtonProps {
	className?: string;
	variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
	size?: 'default' | 'sm' | 'lg' | 'icon';
}

export function LoginButton({ className, variant = 'default', size = 'default' }: LoginButtonProps) {
	const { login, isLoading } = useAuth();

	return (
		<Button onClick={login} disabled={isLoading} variant={variant} size={size} className={className}>
			{isLoading ? (
				<>
					<Loader2 className="mr-2 h-4 w-4 animate-spin" />
					连接中...
				</>
			) : (
				<>
					<LogIn className="mr-2 h-4 w-4" />
					登录
				</>
			)}
		</Button>
	);
}