'use client'

import { cn } from '@/lib/utils'

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

export function LoadingRing({ size = 'md', className }: LoadingRingProps) {
  const sizeClasses = {
    sm: 'w-6 h-6',
    md: 'w-8 h-8',
    lg: 'w-12 h-12'
  }

  return (
    <div className={cn('flex items-center justify-center', className)}>
      <div
        className={cn(
          'animate-spin rounded-full border-2 border-transparent bg-gradient-to-r from-primary to-primary/30 bg-clip-border',
          sizeClasses[size]
        )}
        style={{
          background: 'conic-gradient(from 0deg, hsl(var(--primary)) 0%, hsl(var(--primary)) 50%, transparent 50%, transparent 100%)',
          borderRadius: '50%',
          animation: 'spin 1s linear infinite'
        }}
      >
        <div className="w-full h-full rounded-full bg-background" style={{ margin: '2px' }} />
      </div>
    </div>
  )
}