/**
 * GnClientCard — client summary card.
 *
 * Figma: Client Card.
 */

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

export default defineComponent({
	name: "GnClientCard",
	inheritAttrs: false,
	props: {
		name: { type: String, required: true },
		role: { type: String, default: "" },
		image: { type: String, default: "" },
		icon: { type: String, default: "ph-user" },
		details: { type: Array, default: () => [] }
	},
	emits: ["menu"],
	setup(props, { attrs, slots, emit }) {
		return () => h("article", {
			...attrs,
			class: cx("client-card", attrs.class)
		}, [
			h("div", { class: "client-card__header" }, [
				h("div", { class: "client-card__main" }, [
					h("span", { class: "client-card__avatar" }, [
						slots.avatar?.() || (props.image
							? h("img", { src: props.image, alt: "" })
							: iconNode(props.icon))
					]),
					h("div", { class: "client-card__info" }, [
						h("h3", { class: "client-card__name" }, slots.name?.() || props.name),
						(props.role || slots.role) && h("span", { class: "client-card__role" }, slots.role?.() || props.role)
					])
				]),
				h("button", {
					class: "client-card__menu",
					type: "button",
					"aria-label": "More options",
					onClick: () => emit("menu")
				}, slots.menu?.() || iconNode("ph-dots-three-vertical"))
			]),
			(props.details.length || slots.details) && h("div", { class: "client-card__details" }, [
				slots.details?.(),
				props.details.map((item, index) => h("div", { key: index, class: "client-card__detail" }, [
					h("span", { class: "client-card__detail-label" }, item.label),
					h("span", { class: "client-card__detail-value" }, item.value)
				]))
			])
		]);
	}
});