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

export default defineComponent({
	name: "GnPageHeader",
	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())
		]);
	}
});