import { type ReactNode } from "react";

interface ErrorBannerProps {
  children: ReactNode;
  action?: ReactNode;
}

export function ErrorBanner({ children, action }: ErrorBannerProps) {
  return (
    <div
      role="alert"
      className="flex flex-wrap items-start justify-between gap-3 rounded-md border-l-4 border-error bg-red-50 p-4 text-sm text-error"
    >
      <div>{children}</div>
      {action}
    </div>
  );
}