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

export function Loading({ size = 'md', className = '' }: LoadingProps) {
  const sizes = {
    sm: 'w-4 h-4',
    md: 'w-8 h-8',
    lg: 'w-12 h-12',
  };

  return (
    <div className={`flex items-center justify-center ${className}`}>
      <div className={`relative ${sizes[size]}`}>
        {/* Outer ring */}
        <div
          className={`
            absolute inset-0
            border-2 border-[var(--color-surface-elevated)]
            rounded-full
          `}
        />
        {/* Spinning gradient arc */}
        <div
          className={`
            absolute inset-0
            border-2 border-transparent
            border-t-[var(--color-desire)]
            border-r-[var(--color-desire-glow)]
            rounded-full
            animate-spin
          `}
          style={{ animationDuration: '0.8s' }}
        />
        {/* Inner glow */}
        <div
          className={`
            absolute inset-1
            bg-[var(--color-desire)]/5
            rounded-full
            blur-sm
          `}
        />
      </div>
    </div>
  );
}

export function LoadingPage() {
  return (
    <div className="flex flex-col items-center justify-center min-h-[60vh] gap-4">
      <Loading size="lg" />
      <p className="text-[var(--color-text-muted)] text-sm animate-pulse">
        Loading...
      </p>
    </div>
  );
}

export function LoadingCard() {
  return (
    <div className="rounded-2xl overflow-hidden bg-[var(--color-surface)] border border-[var(--glass-border)]">
      <div className="aspect-[3/4] shimmer" />
      <div className="p-4 space-y-3">
        <div className="h-6 w-3/4 rounded-lg shimmer" />
        <div className="h-4 w-1/2 rounded-lg shimmer" />
        <div className="flex gap-2">
          <div className="h-6 w-16 rounded-full shimmer" />
          <div className="h-6 w-20 rounded-full shimmer" />
        </div>
      </div>
    </div>
  );
}

export function LoadingCards({ count = 8 }: { count?: number }) {
  return (
    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
      {Array.from({ length: count }).map((_, i) => (
        <LoadingCard key={i} />
      ))}
    </div>
  );
}
