import { forwardRef } from "react";

/**
 * Skeleton loader
 *
 * width:      string - CSS value, e.g. "3rem" or "75%" (default: "100%")
 * height:     string - CSS value, e.g. "3rem" (default: "1rem")
 * radius:     string - CSS value, e.g. "9999px" for circle (default: var(--prs-radius-box))
 * background: string - CSS color for the skeleton body
 * foreground: string - CSS color for the shimmer shine
 */
const Skeleton = forwardRef(function Skeleton(
  { width, height, radius, background, foreground, className = "", style = {}, ...props },
  ref
) {
  const skelStyle = {
    ...(width ? { "--skel-width": width } : {}),
    ...(height ? { "--skel-height": height } : {}),
    ...(radius ? { "--skel-radius": radius } : {}),
    ...(background ? { "--skel-bg": background } : {}),
    ...(foreground ? { "--skel-fg": foreground } : {}),
    ...style,
  };

  return (
    <div
      ref={ref}
      className={["prs-skeleton", className].filter(Boolean).join(" ")}
      style={skelStyle}
      aria-hidden="true"
      {...props}
    />
  );
});

export default Skeleton;