import { JSXElement, Show } from "solid-js";

type AlertColor = "white" | "gray" | "blue" | "green" | "red" | "yellow";

interface AlertProps {
    header?: string;
    class?: string;
    children: JSXElement;
}

const BASE = "p-4 rounded-default shadow-xs border";

const COLORS: Record<AlertColor, string> = {
    white:  "bg-surface border-line",
    gray:   "bg-surface-muted border-line",
    blue:   "bg-sky-50 dark:bg-sky-950/40 border-sky-200 dark:border-sky-900",
    green:  "bg-green-50 dark:bg-green-950/40 border-green-200 dark:border-green-900",
    red:    "bg-red-50 dark:bg-red-950/40 border-red-200 dark:border-red-900",
    yellow: "bg-yellow-50 dark:bg-yellow-950/40 border-yellow-200 dark:border-yellow-900",
};

function alertClass(color: AlertColor, extra?: string): string {
    return BASE + " " + COLORS[color] + (extra ? " " + extra : "");
}

function makeAlert(color: AlertColor) {
    return function Alert(props: AlertProps) {
        return (
            <div class={alertClass(color, props.class)}>
                <Show when={props.header}>
                    <h3 class="font-semibold mb-2">{props.header}</h3>
                </Show>
                <p class="text-sm">{props.children}</p>
            </div>
        );
    };
}

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