Inline alert

import * as React from "react";
import { CircleAlertIcon, CircleCheckIcon, InfoIcon, TriangleAlertIcon } from "lucide-react";
import { cn } from "@/lib/utils";

type Tone = "info" | "success" | "warning" | "error";

type InlineAlertProps = Omit<React.ComponentProps<"div">, "title"> & {
  /** Picks the icon and the visible label. */
  tone?: Tone;
  /** The message, one or two sentences. */
  children: React.ReactNode;
};

const ICON = { info: InfoIcon, success: CircleCheckIcon, warning: TriangleAlertIcon, error: CircleAlertIcon } as const;
const LABEL = { info: "Info", success: "Success", warning: "Warning", error: "Error" } as const;

/**
 * A compact alert that sits in the flow of content. State is shown three ways at once:
 * an icon shape, a visible label and, for errors, the destructive token on the icon and rule.
 */
export function InlineAlert({ tone = "info", children, className, ...props }: InlineAlertProps) {
  const Icon = ICON[tone];
  const error = tone === "error";
  return (
    <div
      role={error || tone === "warning" ? "alert" : "status"}
      data-slot="inline-alert"
      data-tone={tone}
      className={cn(
        "flex items-start gap-2.5 rounded-lg border border-l-2 bg-muted/50 py-2.5 pr-3 pl-3 text-sm",
        error ? "border-l-destructive" : "border-l-foreground/40",
        className,
      )}
      {...props}
    >
      <Icon aria-hidden="true" className={cn("mt-0.5 size-4 shrink-0", error && "text-destructive")} />
      <p className="m-0 min-w-0 text-foreground/70">
        <strong className="font-medium text-foreground">{LABEL[tone]}.</strong> {children}
      </p>
    </div>
  );
}