component Alert {
    props {
        class = ""
        title = "Notice"
        description = ""
        variant = "info"
        dismissible = false
    }

    state visible = true

    view {
        <div
            data-show="visible"
            role="alert"
            class="flex items-start gap-3 rounded-2xl border p-4 {variant === 'success' ? 'border-emerald-200 bg-emerald-50 text-emerald-900 dark:border-emerald-900 dark:bg-emerald-950/40 dark:text-emerald-200' : variant === 'warning' ? 'border-amber-200 bg-amber-50 text-amber-900 dark:border-amber-900 dark:bg-amber-950/40 dark:text-amber-200' : variant === 'danger' ? 'border-red-200 bg-red-50 text-red-900 dark:border-red-900 dark:bg-red-950/40 dark:text-red-200' : 'border-blue-200 bg-blue-50 text-blue-900 dark:border-blue-900 dark:bg-blue-950/40 dark:text-blue-200'} {class}"
        >
            <div class="min-w-0 flex-1" >
                <h3 class="font-semibold" >
                    {title}
                </h3>
                <p
                    data-show="description"
                    class="mt-1 text-sm opacity-80"
                >
                    {description}
                </p>
                <div class="mt-2" >
                    <slot />
                </div>
            </div>
            <button
                data-show="dismissible"
                type="button"
                aria-label="Dismiss"
                @click="visible = false"
                class="rounded-lg p-1 hover:bg-black/5"
            >
                ×
            </button>
        </div>
    }
}