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

export default defineComponent({
	name: "GnHorizontalCard",
	inheritAttrs: false,
	props: {
		image: { type: String, default: "" },
		title: { type: String, default: "" },
		titleHref: { type: String, default: "" },
		icon: { type: String, default: "" }
	},
	setup(props, { attrs, slots }) {
		const titleNode = () => {
			const content = [iconNode(props.icon), slots.title?.() || props.title];

			if(props.titleHref) {
				return h("a", { href: props.titleHref, class: "card-title-link" }, content);
			}

			return content;
		};

		return () => h("article", {
			...attrs,
			class: cx("card card-horizontal", attrs.class)
		}, [
			props.image && h("div", { class: "card-media" }, [
				h("img", { src: props.image, alt: "" })
			]),
			h("div", { class: "card-body" }, [
				(props.title || props.icon || slots.title) && h("h3", { class: "card-title" }, titleNode()),
				h("div", { class: "card-content" }, slots.default?.()),
				slots.footer && h("footer", { class: "card-footer" }, slots.footer())
			])
		]);
	}
});