import type { CSSProperties } from "react";

type SkeletonProps = {
  /** Sizing / rounding utilities, e.g. "h-[88px] w-full rounded-xl". */
  className?: string;
  style?: CSSProperties;
};

/**
 * Reusable shimmer placeholder. Renders the reduced-motion-guarded
 * `.ark-skeleton` utility (defined in index.css), so the shimmer animation
 * automatically stops when the user prefers reduced motion. Pass the same
 * sizing/rounding classes as the real content it stands in for to avoid any
 * layout shift when the data loads.
 */
export function Skeleton({ className = "", style }: SkeletonProps) {
  return (
    <div
      className={`ark-skeleton ${className}`.trim()}
      style={style}
      aria-hidden="true"
    />
  );
}
