import type { JSX } from "solid-js";
import { splitProps } from "solid-js";

import type { SkeletonProps } from "./skeleton.props";
export type { SkeletonProps } from "./skeleton.props";

/** A loading placeholder skeleton with data attributes for styling. */
export function Skeleton(props: SkeletonProps): JSX.Element {
	const [local, rest] = splitProps(props, ["visible", "circle", "width", "height"]);
	const isVisible = () => local.visible ?? true;

	return (
		<div
			data-visible={isVisible() ? "" : undefined}
			data-animate={isVisible() ? "" : undefined}
			data-circle={local.circle ? "" : undefined}
			aria-hidden="true"
			style={{
				...(local.width ? { width: local.width } : {}),
				...(local.height ? { height: local.height } : {}),
			}}
			{...rest}
		/>
	);
}
