package components

type BadgeVariant string

const (
	BadgeInProgress BadgeVariant = "in-progress"
	BadgeDeployed   BadgeVariant = "deployed"
)

type badgeConfig struct {
	label string
	dot   string
	class string
}

func badgeProps(variant BadgeVariant) badgeConfig {
	switch variant {
	case BadgeDeployed:
		return badgeConfig{
			label: "Deployed",
			dot:   "bg-teal-500",
			class: "bg-teal-100 text-teal-700 ring-teal-600/20",
		}
	default: // in-progress
		return badgeConfig{
			label: "In Progress",
			dot:   "bg-violet-400",
			class: "bg-violet-100 text-violet-700 ring-violet-600/20",
		}
	}
}

templ Badge(variant BadgeVariant) {
	{{ props := badgeProps(variant) }}
	<span
		class={ "flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium ring-1 ring-inset" , props.class }
	>
		if props.label == "Deployed" {
			<span class="size-3.5 text-teal-600">
            <svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="0"><animate id="spinner_kIfO" begin="0;spinner_xBIM.end" attributeName="r" calcMode="spline" dur="1.2s" values="0;11" keySplines=".52,.6,.25,.99" fill="freeze"/><animate begin="0;spinner_xBIM.end" attributeName="opacity" calcMode="spline" dur="1.2s" values="1;0" keySplines=".52,.6,.25,.99" fill="freeze"/></circle><circle cx="12" cy="12" r="0"><animate id="spinner_Pbsh" begin="spinner_kIfO.begin+0.2s" attributeName="r" calcMode="spline" dur="1.2s" values="0;11" keySplines=".52,.6,.25,.99" fill="freeze"/><animate begin="spinner_kIfO.begin+0.2s" attributeName="opacity" calcMode="spline" dur="1.2s" values="1;0" keySplines=".52,.6,.25,.99" fill="freeze"/></circle><circle cx="12" cy="12" r="0"><animate id="spinner_xBIM" begin="spinner_kIfO.begin+0.4s" attributeName="r" calcMode="spline" dur="1.2s" values="0;11" keySplines=".52,.6,.25,.99" fill="freeze"/><animate begin="spinner_kIfO.begin+0.4s" attributeName="opacity" calcMode="spline" dur="1.2s" values="1;0" keySplines=".52,.6,.25,.99" fill="freeze"/></circle></svg>
			</span>
		} else {
			<span class={ "h-1.5 w-1.5 rounded-full animate-pulse" , props.dot }></span>
		}
		{ props.label }
	</span>
}