/**
 * GnSkeleton - Placeholder loader.
 */

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

export default defineComponent({
	name: "GnSkeleton",
	props: {
		type: { type: String, default: "text" },
		size: { type: String, default: "" },
		width: { type: String, default: "" },
		height: { type: String, default: "" },
		block: { type: Boolean, default: false }
	},
	setup(props) {
		const classes = computed(() => cx("skeleton", `skeleton-${props.type}`, {
			[`skeleton-${props.size}`]: props.size,
			"skeleton-block": props.block
		}));

		return () => h("span", {
			class: classes.value,
			style: {
				width: props.width,
				height: props.height
			},
			"aria-hidden": "true"
		});
	}
});