Assist_Design/apps/portal/src/components/atoms/error-message.tsx

import { forwardRef } from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/shared/utils";
import { ExclamationCircleIcon } from "@heroicons/react/24/outline";

const errorMessageVariants = cva("flex items-center gap-1 text-sm", {
  variants: {
    variant: {
      default: "text-red-600",
      inline: "text-red-600",
      subtle: "text-red-500",
    },
  },
  defaultVariants: {
    variant: "default",
  },
});

interface ErrorMessageProps
  extends React.HTMLAttributes<HTMLParagraphElement>, VariantProps<typeof errorMessageVariants> {
  showIcon?: boolean;
}

const ErrorMessage = forwardRef<HTMLParagraphElement, ErrorMessageProps>(
  ({ className, variant, showIcon = true, children, ...props }, ref) => {
    if (!children) return null;

    return (
      <p
        ref={ref}
        className={cn(errorMessageVariants({ variant, className }))}
        role="alert"
        {...props}
      >
        {showIcon && <ExclamationCircleIcon className="h-4 w-4 flex-shrink-0" />}
        {children}
      </p>
    );
  }
);
ErrorMessage.displayName = "ErrorMessage";

export { ErrorMessage, errorMessageVariants };
export type { ErrorMessageProps };