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

export default defineComponent({
	name: "GnMetricCard",
	props: {
		label: { type: String, required: true },
		value: { type: [String, Number], required: true },
		icon: { type: String, default: "ph-chart-line-up" },
		delta: { type: String, default: "" },
		negative: { type: Boolean, default: false },
		meta: { type: String, default: "" }
	},
	setup(props, { attrs, slots }) {
		return () => h("article", { ...attrs, class: cx("card metric-card", attrs.class) }, [
			h("div", { class: "card-content" }, [
				h("div", { class: "metric-card-header" }, [
					h("p", { class: "metric-card-label" }, slots.label?.() || props.label),
					h("span", { class: "metric-card-icon" }, [iconNode(props.icon)])
				]),
				h("p", { class: "metric-card-value" }, slots.value?.() || props.value),
				(props.delta || props.meta || slots.meta) && h("div", { class: "metric-card-meta" }, [
					props.delta && h("span", {
						class: cx("metric-card-delta", { "metric-card-delta-negative": props.negative })
					}, props.delta),
					slots.meta?.() || props.meta
				])
			])
		]);
	}
});