/**
 * Reusable Spinner component for loading states
 *
 * Provides consistent loading indicators across the application.
 * Supports different sizes and can be used inline or as a full-page loader.
 */
export interface SpinnerProps {
	/**
	 * Size of the spinner
	 * @default 'md'
	 */
	size?: 'sm' | 'md' | 'lg' | 'xl';

	/**
	 * Color variant
	 * @default 'primary' - Uses sidebar-bg color
	 */
	color?: 'primary' | 'secondary' | 'white';

	/**
	 * Optional text to display below the spinner
	 */
	text?: string;

	/**
	 * Additional CSS classes
	 */
	className?: string;

	/**
	 * Whether to show as full-page centered loader
	 * @default false
	 */
	fullPage?: boolean;
}

const sizeClasses = {
	sm: 'w-4 h-4 border-2',
	md: 'w-6 h-6 border-2',
	lg: 'w-8 h-8 border-[3px]',
	xl: 'w-12 h-12 border-4',
};

const colorClasses = {
	primary: 'border-sidebar-bg border-t-transparent',
	secondary: 'border-text-secondary border-t-transparent',
	white: 'border-white border-t-transparent',
};

export function Spinner({ size = 'md', color = 'primary', text, className = '', fullPage = false }: SpinnerProps) {
	const spinnerElement = (
		<div
			className={`inline-block rounded-full animate-spin ${sizeClasses[size]} ${colorClasses[color]} ${className}`}
		/>
	);

	if (fullPage) {
		return (
			<div className='flex flex-col items-center justify-center h-full py-12'>
				{spinnerElement}
				{text && <p className='mt-4 text-text-secondary text-sm'>{text}</p>}
			</div>
		);
	}

	if (text) {
		return (
			<div className={`flex flex-col items-center gap-2 ${className}`}>
				{spinnerElement}
				<p className='text-text-secondary text-sm'>{text}</p>
			</div>
		);
	}

	return spinnerElement;
}