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

export default defineComponent({
	name: "GnUsageMeter",
	props: {
		title: { type: String, required: true },
		value: { type: Number, required: true },
		max: { type: Number, default: 100 },
		meta: { type: String, default: "" }
	},
	setup(props, { slots }) {
		return () => {
			const percent = Math.max(0, Math.min(100, Math.round((props.value / props.max) * 100)));

			return h("section", { class: "usage-meter" }, [
				h("h3", { class: "usage-meter-title" }, [
					slots.title?.() || props.title,
					h("span", { class: "usage-meter-value" }, `${percent}%`)
				]),
				h(GnProgress, { value: props.value, max: props.max }),
				(props.meta || slots.meta) && h("p", { class: "usage-meter-meta" }, slots.meta?.() || props.meta)
			]);
		};
	}
});