import { Spinner } from './Spinner.tsx';

interface ButtonProps {
	on_click: () => void;
	children: React.ReactNode;
	disabled?: boolean;
	loading?: boolean;
	variant?: 'primary' | 'secondary';
}

export function Button({
	on_click,
	children,
	disabled = false,
	loading = false,
	variant = 'primary',
}: ButtonProps) {
	const base_classes = 'px-4 py-2 rounded font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed inline-flex items-center gap-2';
	const variant_classes = {
		primary: 'bg-blue-600 text-white hover:bg-blue-700',
		secondary: 'bg-gray-200 text-gray-800 hover:bg-gray-300',
	};

	return (
		<button
			onClick={on_click}
			disabled={disabled || loading}
			className={`${base_classes} ${variant_classes[variant]}`}
			type='button'
		>
			{loading && <Spinner />}
			{children}
		</button>
	);
}