/**
 * GnProfileItem — horizontal rounded action row.
 *
 * Figma: Profile.
 *
 * @typedef {Object} GnProfileItemProps
 * @property {string} title
 * @property {string} [meta='']
 * @property {string} [icon=''] - VMK icon key or legacy Phosphor name (ph-*).
 * @property {string} [image=''] - Avatar/image URL (takes precedence over icon).
 * @property {boolean} [danger=false] - Danger/destuctive theme.
 * @property {boolean} [disabled=false]
 * @property {string} [href=''] - Renders as link when provided.
 */

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

export default defineComponent({
	name: "GnProfileItem",
	inheritAttrs: false,
	props: {
		title: { type: String, required: true },
		meta: { type: String, default: "" },
		icon: { type: String, default: "" },
		image: { type: String, default: "" },
		danger: { type: Boolean, default: false },
		disabled: { type: Boolean, default: false },
		href: { type: String, default: "" }
	},
	emits: ["click"],
	setup(props, { attrs, slots, emit }) {
		return () => {
			const tag = props.href ? "a" : "button";

			return h(tag, {
				...attrs,
				class: cx(
					"profile-item",
					{
						"is-danger": props.danger,
						"is-disabled": props.disabled
					},
					attrs.class
				),
				href: props.href || undefined,
				type: props.href ? undefined : "button",
				disabled: props.disabled || undefined,
				onClick: event => {
					if (!props.disabled) {
						emit("click", event);
					}
				}
			}, [
				h("div", { class: "profile-item__main" }, [
					h("span", { class: "profile-item__icon" }, [
						slots.icon?.() || (props.image
							? h("img", { src: props.image, alt: "" })
							: iconNode(props.icon))
					]),
					h("div", { class: "profile-item__content" }, [
						h("span", { class: "profile-item__title" }, slots.title?.() || props.title),
						(props.meta || slots.meta) && h("span", { class: "profile-item__meta" }, slots.meta?.() || props.meta)
					])
				]),
				h("span", { class: "profile-item__chevron" }, slots.chevron?.() || iconNode("ph-chevron-right"))
			]);
		};
	}
});