"use client";

import * as React from "react";
import { AlertTriangle, CheckCircle2, Info, X, XCircle } from "lucide-react";
import { cn } from "@/lib/utils";

export type AlertVariant = "info" | "success" | "warning" | "danger";

const CONFIG: Record<AlertVariant, { icon: React.ElementType; className: string }> = {
  info: { icon: Info, className: "border-sky-500/30 bg-sky-500/8 text-sky-600 dark:text-sky-400" },
  success: {
    icon: CheckCircle2,
    className: "border-emerald-500/30 bg-emerald-500/8 text-emerald-600 dark:text-emerald-400",
  },
  warning: {
    icon: AlertTriangle,
    className: "border-amber-500/30 bg-amber-500/8 text-amber-600 dark:text-amber-400",
  },
  danger: {
    icon: XCircle,
    className: "border-red-500/30 bg-red-500/8 text-red-600 dark:text-red-400",
  },
};

export function InlineAlert({
  variant = "info",
  title,
  children,
  action,
  onDismiss,
  className,
}: {
  variant?: AlertVariant;
  title?: string;
  children?: React.ReactNode;
  action?: React.ReactNode;
  onDismiss?: () => void;
  className?: string;
}) {
  const { icon: Icon, className: tone } = CONFIG[variant];

  return (
    <div
      role="alert"
      className={cn("flex items-start gap-3 rounded-lg border p-3.5", tone, className)}
    >
      <Icon className="mt-0.5 size-4 shrink-0" />

      <div className="min-w-0 flex-1">
        {title && <p className="text-sm font-medium">{title}</p>}
        {children && (
          <div className={cn("text-sm text-foreground/70", title && "mt-0.5")}>{children}</div>
        )}
        {action && <div className="mt-2.5">{action}</div>}
      </div>

      {onDismiss && (
        <button
          onClick={onDismiss}
          aria-label="Dismiss"
          className="shrink-0 rounded p-0.5 opacity-60 transition-opacity hover:opacity-100"
        >
          <X className="size-3.5" />
        </button>
      )}
    </div>
  );
}

Related components