import { cn } from "@/shared/utils";

interface SkeletonProps {
  className?: string;
  animate?: boolean;
}

/**
 * Base skeleton atom for loading states.
 * A simple shimmer box primitive that can be composed into loading patterns.
 *
 * For composed loading skeletons, use:
 * - LoadingCard, LoadingTable, LoadingStats from molecules/LoadingSkeletons
 * - Feature-specific skeletons from features/[feature]/components/skeletons
 */
export function Skeleton({ className, animate = true }: SkeletonProps) {
  return (
    <div className={cn("rounded-md", animate ? "cp-skeleton-shimmer" : "bg-muted", className)} />
  );
}
