blockchain/apps/portal/components/ui/error-banner.tsx

import type { ReactNode } from "react";

import { cn } from "@/lib/utils";

/**
 * Inline error for forms and cards — plain language, not a stack trace.
 */
export function ErrorBanner({
  children,
  className,
  title = "Something went wrong",
}: {
  children: ReactNode;
  className?: string;
  title?: string;
}) {
  return (
    <div
      className={cn(
        "rounded-lg border border-pending/40 bg-pending-muted px-3 py-3 text-left sm:px-4",
        className,
      )}
      role="alert"
    >
      <p className="text-sm font-medium text-pending">{title}</p>
      <div className="mt-1 text-sm leading-relaxed text-foreground/90">
        {children}
      </div>
    </div>
  );
}