import { ReactNode } from "react";

interface ErrorMessageProps {
  message: string | null;
  className?: string;
  children?: ReactNode;
}

/**
 * A reusable error message component
 * Renders nothing if message is null or empty
 */
export function ErrorMessage({ message, className = "", children }: ErrorMessageProps) {
  if (!message) return null;
  
  return (
    <div className={`mt-4 rounded-md bg-red-50 p-3 text-red-500 ${className}`}>
      <p>{message}</p>
      {children}
    </div>
  );
}