/**
 * GnChatMessage — single chat message bubble (user or AI).
 *
 * Figma: Chat Messages & Bubbles / Messenger Messages & Bubbles.
 */

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

export default defineComponent({
	name: "GnChatMessage",
	inheritAttrs: false,
	props: {
		sender: { type: String, default: "user" }, // user | ai
		title: { type: String, default: "" },
		actions: { type: Array, default: () => [] },
		options: { type: Array, default: () => [] }
	},
	emits: ["action", "option"],
	setup(props, { attrs, slots, emit }) {
		return () => h("div", {
			...attrs,
			class: cx("chat-message", `chat-message-${props.sender}`, attrs.class)
		}, [
			props.title && h("h4", { class: "chat-message-title" }, props.title),
			h("div", { class: "chat-bubble" }, slots.default?.()),
			(props.actions.length || slots.actions) && h("div", { class: "chat-message-actions" }, [
				slots.actions?.(),
				props.actions.map(action => h("button", {
					class: "chat-message-action",
					type: "button",
					"aria-label": action.label,
					onClick: () => emit("action", action.key || action.label)
				}, iconNode(action.icon)))
			]),
			props.options.length > 0 && h("div", { class: "chat-message-options" },
				props.options.map(opt => h("button", {
					class: "chat-option",
					type: "button",
					onClick: () => emit("option", opt)
				}, opt.icon && iconNode(opt.icon), opt.label))
			)
		]);
	}
});