/**
 * GnActionCard - Card with a kicker, title, text and an actions slot.
 *
 * @typedef {Object} GnActionCardProps
 * @property {string} [kicker=''] - Eyebrow text
 * @property {string} title - Card title
 * @property {string} [text=''] - Body text
 *
 * @slots default - Body content (overrides text)
 * @slots kicker - Kicker content (overrides kicker)
 * @slots title - Title content (overrides title)
 * @slots actions - Footer actions
 */

import { defineComponent, h } from "vue";

export default defineComponent({
	name: "GnActionCard",
	props: {
		kicker: { type: String, default: "" },
		title: { type: String, required: true },
		text: { type: String, default: "" }
	},
	setup(props, { slots }) {
		return () => h("article", { class: "card action-card" }, [
			h("div", { class: "card-content" }, [
				(props.kicker || slots.kicker) && h("span", { class: "action-card-kicker" }, slots.kicker?.() || props.kicker),
				h("h3", { class: "action-card-title" }, slots.title?.() || props.title),
				(props.text || slots.default) && h("p", { class: "action-card-text" }, slots.default?.() || props.text),
				slots.actions && h("div", { class: "action-card-actions" }, slots.actions())
			])
		]);
	}
});