package webui

import "kjol/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-white border-neutral-100",
	"gray":   "bg-neutral-50 border-neutral-200",
	"blue":   "bg-sky-50 border-sky-200",
	"green":  "bg-green-50 border-green-200",
	"red":    "bg-red-50 border-red-200",
	"yellow": "bg-yellow-50 border-yellow-200",
}

// 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.El("h3", vdom.Attr("class", "font-semibold mb-2"), vdom.Text(header)))
	}
	mods = append(mods, vdom.El("p", kids([]vdom.Mod{vdom.Attr("class", "text-sm")}, children)...))
	return vdom.El("div", mods...)
}