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

export default defineComponent({
	name: "GnCard",
	props: {
		title: { type: String, default: "" },
		variant: { type: String, default: "" }
	},
	setup(props, { attrs, slots }) {
		return () => h("article", {
			...attrs,
			class: cx("card", props.variant && `card-${props.variant}`, 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())
		]);
	}
});