package webui

import "kjol/wasmruntime/vdom"

// Port of web/kit/Alerts.tsx. The TSX exports one component per color
// (AlertWhite, AlertBlue, …); here that's Alert(color, header, children).

const (
	AlertWhite  = "white"
	AlertGray   = "gray"
	AlertBlue   = "blue"
	AlertGreen  = "green"
	AlertRed    = "red"
	AlertYellow = "yellow"
)

const alertBase = "p-4 rounded-default shadow-xs border"

var alertColors = map[string]string{
	"white":  "bg-surface border-line",
	"gray":   "bg-surface-muted border-line",
	"blue":   "bg-sky-50 dark:bg-sky-950 border-sky-200 dark:border-sky-900",
	"green":  "bg-green-50 dark:bg-green-950 border-green-200 dark:border-green-900",
	"red":    "bg-red-50 dark:bg-red-950 border-red-200 dark:border-red-900",
	"yellow": "bg-yellow-50 dark:bg-yellow-950 border-yellow-200 dark:border-yellow-900",
}

// Alert renders a colored callout. header is optional (rendered as a bold title
// above the body); children form the body.
func Alert(color, header string, children ...*vdom.VNode) *vdom.VNode {
	cc := alertColors[color]
	if cc == "" {
		cc = alertColors["white"]
	}
	mods := []vdom.Mod{vdom.Attr("class", cx(alertBase, cc))}
	if header != "" {
		mods = append(mods, vdom.H3(vdom.Attr("class", "font-semibold mb-2"), vdom.Text(header)))
	}
	mods = append(mods, vdom.P(kids([]vdom.Mod{vdom.Attr("class", "text-sm")}, children)...))
	return vdom.Div(mods...)
}