import type { HTMLAttributes, ReactNode } from 'react';
import { forwardRef, useMemo } from 'react';
import './error-message.css';

export type ErrorMessageProps = {
  children: ReactNode;
  /** Defaults to `alert` so assistive tech announces validation errors. */
  role?: 'alert' | 'status' | 'none';
} & Omit<HTMLAttributes<HTMLParagraphElement>, 'role' | 'children'>;

function isEmptyContent(node: ReactNode): boolean {
  if (node == null || node === false) return true;
  if (typeof node === 'string') return node.trim().length === 0;
  return false;
}

export const ErrorMessage = forwardRef<HTMLParagraphElement, ErrorMessageProps>(function ErrorMessage(
  { children, className, role = 'alert', id, ...rest },
  ref
) {
  const hidden = useMemo(() => isEmptyContent(children), [children]);
  if (hidden) return null;

  const resolvedRole = role === 'none' ? undefined : role;

  return (
    <p
      ref={ref}
      id={id}
      role={resolvedRole}
      className={['ccl-error-message', className ?? ''].filter(Boolean).join(' ')}
      {...rest}
    >
      {children}
    </p>
  );
});