"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="flex items-start gap-3 rounded-lg border border-[#f06a6f]/55 bg-[#fff1f2] p-4 text-[#9f1239] dark:border-[#e5484d]/55 dark:bg-[#3a111b]/70 dark:text-[#fecdd3]"
    >
      <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-[#be123c] transition-colors hover:text-[#881337] dark:text-[#fda4af] dark:hover:text-[#ffe4e6]"
          aria-label="Dismiss"
        >
          <X className="h-4 w-4" aria-hidden="true" />
        </button>
      )}
    </div>
  );
}