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

/**
 * ErrorMessage — now powered by shadcn/ui Alert base styles
 *
 * Keeps the same props interface (variant, showIcon, children) for backward
 * compatibility. Uses Alert-inspired styling with destructive color tokens.
 */

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-destructive",
      inline: "text-destructive",
      subtle: "text-destructive/80",
    },
  },
  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}
        data-slot="error-message"
        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 };