Alert Inline

interface AlertInlineProps {
  type: "error" | "success" | "info";
  message: string;
  field?: string;
}

const styles = {
  error: { bg: "bg-red-50", text: "text-red-700", border: "border-red-200", icon: "M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" },
  success: { bg: "bg-emerald-50", text: "text-emerald-700", border: "border-emerald-200", icon: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" },
  info: { bg: "bg-blue-50", text: "text-blue-700", border: "border-blue-200", icon: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" },
};

export function AlertInline({ type, message, field }: AlertInlineProps) {
  const s = styles[type];

  return (
    <div className={`flex items-start gap-2.5 px-4 py-2.5 rounded-lg border ${s.bg} ${s.border} ${s.text}`} role="alert">
      <svg className="w-4 h-4 mt-0.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
        <path strokeLinecap="round" strokeLinejoin="round" d={s.icon} />
      </svg>
      <div className="text-sm">
        {field && <span className="font-semibold capitalize">{field.replace(/-/g, " ")}: </span>}
        {message}
      </div>
    </div>
  );
}