Alert Outline

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

interface AlertOutlineProps {
  variant?: AlertVariant;
  title: string;
  message: string;
}

const variantConfig: Record<AlertVariant, { border: string; bg: string; titleColor: string; textColor: string; icon: string }> = {
  info: {
    border: "border-l-blue-500",
    bg: "bg-blue-50",
    titleColor: "text-blue-900",
    textColor: "text-blue-700",
    icon: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z",
  },
  success: {
    border: "border-l-emerald-500",
    bg: "bg-emerald-50",
    titleColor: "text-emerald-900",
    textColor: "text-emerald-700",
    icon: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z",
  },
  warning: {
    border: "border-l-amber-500",
    bg: "bg-amber-50",
    titleColor: "text-amber-900",
    textColor: "text-amber-700",
    icon: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z",
  },
  danger: {
    border: "border-l-red-500",
    bg: "bg-red-50",
    titleColor: "text-red-900",
    textColor: "text-red-700",
    icon: "M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z",
  },
};

export function AlertOutline({ variant = "info", title, message }: AlertOutlineProps) {
  const c = variantConfig[variant];

  return (
    <div className={`border-l-4 ${c.border} ${c.bg} p-4 rounded-r-lg`} role="alert">
      <div className="flex gap-3">
        <svg className={`w-5 h-5 mt-0.5 shrink-0 ${c.textColor}`} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
          <path strokeLinecap="round" strokeLinejoin="round" d={c.icon} />
        </svg>
        <div>
          <p className={`font-semibold ${c.titleColor}`}>{title}</p>
          <p className={`text-sm mt-1 ${c.textColor}`}>{message}</p>
        </div>
      </div>
    </div>
  );
}