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

/**
 * Shimmer ­— un placeholder animé avec un dégradé qui balaie le contenu,
 * plus élégant qu'un simple pulse. À utiliser à la place de Skeleton
 * pour les zones plus grandes (cards, images).
 */
export function Shimmer({
  className,
  ...props
}: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="shimmer"
      className={cn(
        "relative overflow-hidden rounded-md bg-muted/60",
        "before:absolute before:inset-0 before:-translate-x-full",
        "before:animate-[shimmer_1.8s_ease-in-out_infinite]",
        "before:bg-gradient-to-r before:from-transparent before:via-white/40 before:to-transparent",
        "dark:before:via-white/10",
        className
      )}
      {...props}
    />
  )
}
