'use client'

import clsx from 'clsx'

interface ShimmerProps {
  className?: string
  variant?: 'default' | 'text' | 'card'
}

/**
 * Unified Shimmer component for loading/locked states
 * Use throughout the app for consistent loading UI
 */
export function Shimmer({ className, variant = 'default' }: ShimmerProps) {
  return (
    <div className={clsx(
      "relative overflow-hidden rounded",
      variant === 'default' && "bg-foreground/[0.06]",
      variant === 'text' && "bg-foreground/[0.04]",
      variant === 'card' && "bg-foreground/[0.03]",
      className
    )}>
      <div 
        className="absolute inset-0 -translate-x-full bg-gradient-to-r from-transparent via-foreground/[0.08] to-transparent"
        style={{
          animation: 'shimmer 2s infinite',
        }}
      />
    </div>
  )
}

/**
 * Shimmer block for price/data placeholders when user is not authenticated
 */
export function ShimmerBlock({ className }: { className?: string }) {
  return <Shimmer className={className} variant="default" />
}

/**
 * Shimmer text for inline text placeholders
 */
export function ShimmerText({ className }: { className?: string }) {
  return <Shimmer className={clsx("h-4", className)} variant="text" />
}