import { FiAlertCircle } from "react-icons/fi";

interface Props {
  message?: string | null;
  className?: string;
}

export default function FormErrorBanner({ message, className = "" }: Props) {
  if (!message) return null;
  return (
    <div
      role="alert"
      className={[
        "flex items-start gap-2 rounded-xl border border-red-500/40 bg-red-500/10",
        "px-4 py-3 text-sm text-red-300 whitespace-pre-line",
        className,
      ].join(" ")}
    >
      <FiAlertCircle className="mt-0.5 shrink-0" />
      <span>{message}</span>
    </div>
  );
}
