import { defineComponent, h } from "vue";
import { cx } from "../utils.js";

export default defineComponent({
	name: "GnSkeleton",
	props: {
		type: { type: String, default: "line" },
		stack: { type: Boolean, default: false },
		count: { type: Number, default: 1 }
	},
	setup(props, { attrs }) {
		const skeleton = key => h("span", {
			key,
			...attrs,
			class: cx("skeleton", `skeleton-${props.type}`, attrs.class)
		});

		return () => props.stack
			? h("div", { class: "skeleton-stack" }, Array.from({ length: props.count }, (_, index) => skeleton(index)))
			: skeleton(0);
	}
});