import { AlertCircle } from "lucide-react";

interface ErrorBannerProps {
  message: string;
  onDismiss?: () => void;
}

export const ErrorBanner = ({ message, onDismiss }: ErrorBannerProps) => (
  <div
    role="alert"
    className="flex items-start gap-3 rounded-xl border border-red-500/20 bg-red-500/10 px-4 py-3 text-sm text-red-300"
  >
    <AlertCircle className="mt-0.5 h-4 w-4 flex-shrink-0 text-red-400" strokeWidth={2} aria-hidden="true" />
    <p className="flex-1">{message}</p>
    {onDismiss ? (
      <button
        type="button"
        onClick={onDismiss}
        className="text-xs text-red-400/80 hover:text-red-300"
        aria-label="Dismiss"
      >
        Dismiss
      </button>
    ) : null}
  </div>
);