"use client";

import type { ReactElement } from "react";
import { Info, X } from "lucide-react";

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

export function AuthErrorBanner({ message, onDismiss }: AuthErrorBannerProps): ReactElement {
  return (
    <div
      role="alert"
      aria-live="polite"
      className="bg-blue-50 border border-blue-200 text-blue-700 rounded-lg p-4 flex items-start gap-3"
    >
      <Info className="h-5 w-5 flex-shrink-0 mt-0.5" aria-hidden="true" />
      <span className="flex-1 text-sm">{message}</span>
      {onDismiss && (
        <button
          type="button"
          onClick={onDismiss}
          className="flex-shrink-0 text-blue-500 hover:text-blue-700 transition-colors"
          aria-label="Dismiss"
        >
          <X className="h-4 w-4" aria-hidden="true" />
        </button>
      )}
    </div>
  );
}
