import * as React from "react";
import { cn } from "@/lib/utils";

type Variant = "info" | "danger" | "success" | "warning";

const styles: Record<Variant, string> = {
  info: "bg-(--color-info-subtle) border-(--color-info)/20 text-(--color-info)",
  danger: "bg-(--color-danger-subtle) border-(--color-danger)/20 text-(--color-danger)",
  success: "bg-(--color-success-subtle) border-(--color-success)/20 text-(--color-success)",
  warning: "bg-(--color-warning-subtle) border-(--color-warning)/20 text-(--color-warning)",
};

export function Alert({ variant = "info", className, ...props }: React.HTMLAttributes<HTMLDivElement> & { variant?: Variant }) {
  return <div role={variant === "danger" ? "alert" : "status"} className={cn("rounded-lg border px-4 py-3 text-sm font-medium shadow-sm", styles[variant], className)} {...props} />;
}