/**
 * GnStepCard — step card.
 *
 * Figma: Card - Step.
 */

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

export default defineComponent({
	name: "GnStepCard",
	inheritAttrs: false,
	props: {
		step: { type: Number, required: true },
		total: { type: Number, required: true },
		title: { type: String, required: true },
		description: { type: String, default: "" },
		done: { type: Boolean, default: false },
		actionLabel: { type: String, default: "" }
	},
	emits: ["action"],
	setup(props, { attrs, slots, emit }) {
		return () => {
			const badgeText = `Step ${props.step}`;
			const isDone = props.done;
			const label = slots.action?.()
				? null
				: (props.actionLabel || (isDone ? "Done" : "Get started"));

			return h("article", {
				...attrs,
				class: cx("step-card", attrs.class)
			}, [
				h("span", { class: "step-card__badge" }, slots.badge?.() || badgeText),
				h("h3", { class: "step-card__title" }, slots.title?.() || props.title),
				(props.description || slots.description) && h("p", { class: "step-card__description" },
					slots.description?.() || props.description),
				(label || slots.action) && h("button", {
					class: cx("step-card__action", { "step-card__action--done": isDone }),
					type: "button",
					onClick: () => emit("action")
				}, slots.action?.() || [
					isDone && iconNode("ph-check-circle", "step-card__action-icon"),
					label
				])
			]);
		};
	}
});