/**
 * GnPageHeader — page title area with optional subtitle and actions.
 *
 * API-compatible with gnexus-ui-kit GnPageHeader.
 *
 * @typedef {Object} GnPageHeaderProps
 * @property {string} title
 * @property {string} [subtitle='']
 * @property {string} [kicker=''] - Eyebrow/kicker text above the title
 * @property {boolean} [compact=false]
 * @property {boolean} [accent=false]
 *
 * @slots title - Override title content
 * @slots kicker - Override kicker content
 * @slots subtitle - Override subtitle content
 * @slots meta - Meta row content
 * @slots actions - Header actions
 */

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

export default defineComponent({
	name: "GnPageHeader",
	inheritAttrs: false,
	props: {
		title: { type: String, required: true },
		subtitle: { type: String, default: "" },
		kicker: { type: String, default: "" },
		compact: { type: Boolean, default: false },
		accent: { type: Boolean, default: false }
	},
	setup(props, { attrs, slots }) {
		return () => h("header", {
			...attrs,
			class: cx("page-header", {
				"page-header-compact": props.compact,
				"page-header-accent": props.accent
			}, attrs.class)
		}, [
			h("div", { class: "page-header-content" }, [
				(props.kicker || slots.kicker) && h("div", { class: "page-header-kicker" }, slots.kicker?.() || props.kicker),
				h("h1", { class: "page-header-title" }, slots.title?.() || props.title),
				(props.subtitle || slots.subtitle) && h("p", { class: "page-header-subtitle" }, slots.subtitle?.() || props.subtitle),
				slots.meta && h("div", { class: "page-header-meta" }, slots.meta())
			]),
			slots.actions && h("div", { class: "page-header-actions" }, slots.actions())
		]);
	}
});