import type { CSSProperties, HTMLAttributes } from "react";

export type SkeletonProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
  width?: CSSProperties["width"];
  height?: CSSProperties["height"];
  radius?: CSSProperties["borderRadius"];
};

export function Skeleton({
  className,
  width,
  height,
  radius,
  style,
  ...props
}: SkeletonProps) {
  const classes = ["ui-skeleton", className].filter(Boolean).join(" ");

  return (
    <div
      {...props}
      className={classes}
      aria-hidden="true"
      style={{
        width,
        height,
        borderRadius: radius,
        ...style,
      }}
    />
  );
}