/**
 * GnCampaignCard — campaign summary card.
 *
 * Figma: Card - Campaign / Card - Campaign Type.
 *
 * @typedef {Object} GnCampaignCardMeta
 * @property {string} label
 * @property {string} value
 */

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

export default defineComponent({
	name: "GnCampaignCard",
	inheritAttrs: false,
	props: {
		icon: { type: String, default: "" },
		title: { type: String, required: true },
		meta: { type: Array, default: () => [] },
		action: { type: String, default: "" },
		variant: { type: String, default: "summary" } // summary | type
	},
	emits: ["action"],
	setup(props, { attrs, slots, emit }) {
		return () => h("article", {
			...attrs,
			class: cx("campaign-card", { "campaign-card--type": props.variant === "type" }, attrs.class)
		}, [
			h("div", { class: "campaign-card__header" }, [
				h("span", { class: "campaign-card__icon" }, slots.icon?.() || iconNode(props.icon)),
				h("h3", { class: "campaign-card__title" }, slots.title?.() || props.title)
			]),
			props.variant === "type" && (props.action || slots.text) && h("p", { class: "campaign-card__text" }, slots.text?.() || ""),
			(props.meta.length || slots.meta) && h("div", { class: "campaign-card__meta" }, [
				slots.meta?.(),
				props.meta.map((item, index) => h("div", { key: index, class: "campaign-card__meta-item" }, [
					h("span", { class: "campaign-card__meta-label" }, item.label),
					h("span", { class: "campaign-card__meta-value" }, item.value)
				]))
			]),
			(props.action || slots.action) && h("button", {
				class: "campaign-card__action",
				type: "button",
				onClick: () => emit("action")
			}, slots.action?.() || props.action)
		]);
	}
});