import { cn } from '@/lib/utils'
import { Loader2 } from 'lucide-react'

interface LoadingSpinnerProps {
  size?: 'sm' | 'md' | 'lg'
  className?: string
}

export function LoadingSpinner({ size = 'md', className }: LoadingSpinnerProps) {
  const sizeClasses = {
    sm: 'h-4 w-4',
    md: 'h-6 w-6',
    lg: 'h-8 w-8'
  }

  return (
    <Loader2 
      className={cn(
        'animate-spin text-muted-foreground',
        sizeClasses[size],
        className
      )} 
    />
  )
}

interface GradientLoadingProps {
  size?: 'sm' | 'md' | 'lg'
  className?: string
}

export function GradientLoading({ size = 'md', className }: GradientLoadingProps) {
  const sizeClasses = {
    sm: 'w-5 h-5',
    md: 'w-8 h-8',
    lg: 'w-12 h-12'
  }

  return (
    <div className={cn('flex items-center justify-center', className)}>
      <div className={cn(
        'relative',
        sizeClasses[size]
      )}>
        <div className={cn(
          'absolute inset-0 rounded-full bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 opacity-75',
          'animate-spin'
        )} />
        <div className={cn(
          'absolute inset-1 rounded-full bg-background'
        )} />
        <div className={cn(
          'absolute inset-2 rounded-full bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 opacity-60',
          'animate-ping'
        )} />
      </div>
    </div>
  )
}

interface LoadingOverlayProps {
  isLoading: boolean
  children: React.ReactNode
  className?: string
  showText?: boolean
  text?: string
}

export function LoadingOverlay({ 
  isLoading, 
  children, 
  className, 
  showText = false,
  text = "Loading..." 
}: LoadingOverlayProps) {
  return (
    <div className={cn("relative", className)}>
      {children}
      {isLoading && (
        <div className="absolute inset-0 bg-background/60 backdrop-blur-sm flex items-center justify-center rounded-lg transition-all duration-200 ease-in-out">
          <div className="flex items-center gap-3">
            <GradientLoading size="sm" />
            {showText && (
              <span className="text-sm text-muted-foreground font-medium">{text}</span>
            )}
          </div>
        </div>
      )}
    </div>
  )
}