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

export default defineComponent({
	name: "GnAvatar",
	props: {
		src: { type: String, default: "" },
		alt: { type: String, default: "" },
		initials: { type: String, default: "" },
		icon: { type: String, default: "" },
		size: { type: String, default: "md" },
		variant: { type: String, default: "primary" },
		outline: { type: Boolean, default: false },
		status: { type: String, default: "" }
	},
	setup(props, { attrs }) {
		return () => {
			const variant = normalizeVariant(props.variant);

			return h("span", {
				...attrs,
				class: cx("avatar", `avatar-${variant}`, {
					"avatar-sm": props.size === "sm",
					"avatar-lg": props.size === "lg",
					"avatar-outline": props.outline,
					"is-online": props.status === "online",
					"is-busy": props.status === "busy",
					"is-offline": props.status === "offline"
				}, attrs.class)
			}, [
				props.src ? h("img", { src: props.src, alt: props.alt }) : iconNode(props.icon) || props.initials,
				props.status && h("span", { class: "avatar-status", "aria-hidden": "true" })
			]);
		};
	}
});