import { type ComponentPropsWithoutRef } from "react";

import { Icon } from "../icon/Icon";
import { Tooltip } from "../tooltip/Tooltip";

export interface ErrorIconProps extends ComponentPropsWithoutRef<"div"> {
  errorText?: string;
  disabled?: boolean;
}

export const ErrorIcon = ({
  errorText,
  disabled,
  ...restProps
}: ErrorIconProps) => (
  <Tooltip
    tooltip={errorText || ""}
    disabled={errorText === "" || disabled}
    placement="top"
    spacing="4"
    {...restProps}
  >
    <div className="flex h-20 text-R400 hover:text-R300">
      <Icon name="exclamation-mark-octagon" size="20" weight="semibold" />
    </div>
  </Tooltip>
);
