import * as React from 'react';
import { cn } from '../utils/cn';
import { AlertCircle } from 'lucide-react';

export interface ErrorMessageProps extends React.HTMLAttributes<HTMLParagraphElement> {
  /** The error message to display */
  message?: string;
  /** Show an icon alongside the message */
  showIcon?: boolean;
}

/**
 * ErrorMessage displays a field-level error message.
 *
 * @example
 * <ErrorMessage message="Email is required" />
 *
 * @example
 * <ErrorMessage message={errors.email} showIcon />
 */
const ErrorMessage = React.forwardRef<HTMLParagraphElement, ErrorMessageProps>(
  ({ className, message, showIcon = false, ...props }, ref) => {
    if (!message) return null;

    return (
      <p
        ref={ref}
        role="alert"
        className={cn(
          'flex items-center gap-1.5 text-sm text-[var(--error)] mt-1.5',
          className
        )}
        {...props}
      >
        {showIcon && <AlertCircle className="h-3.5 w-3.5 flex-shrink-0" />}
        <span>{message}</span>
      </p>
    );
  }
);
ErrorMessage.displayName = 'ErrorMessage';

export { ErrorMessage };
