/**
 * @factory/ui — Skeleton (loading placeholder, token colors, CSS pulse).
 */
import * as React from "react";
import { clsx } from "clsx";

export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Fixed height in px (defaults to 1rem line height). */
  height?: number;
  /** Fixed width in px. */
  width?: number;
  circular?: boolean;
}

export function Skeleton({ height, width, circular = false, className, ...props }: SkeletonProps) {
  return (
    <div
      aria-hidden="true"
      className={clsx("animate-pulse rounded-md bg-muted", circular && "rounded-full", className)}
      style={
        {
          height: height === undefined ? undefined : `${height}px`,
          width: width === undefined ? undefined : `${width}px`,
          minHeight: height === undefined ? "1rem" : undefined,
        } as React.CSSProperties
      }
      {...props}
    />
  );
}