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

export default defineComponent({
	name: "GnCard",
	inheritAttrs: false,
	props: {
		title: { type: String, default: "" },
		variant: { type: String, default: "" },
		size: { type: String, default: "" }
	},
	setup(props, { attrs, slots }) {
		return () => h("article", {
			...attrs,
			class: cx(
				"card",
				props.variant && `card-${props.variant}`,
				{
					"card-sm": props.size === "sm",
					"card-lg": props.size === "lg"
				},
				attrs.class
			)
		}, [
			(props.title || slots.title) && h("header", { class: "card-title" }, slots.title?.() || props.title),
			h("div", { class: "card-content" }, slots.default?.()),
			slots.footer && h("footer", { class: "card-footer" }, slots.footer())
		]);
	}
});