import React, { type ComponentPropsWithoutRef } from "react";
import { InputAdornment } from "@mui/material";

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}
  >
    <InputAdornment
      position="end"
      classes={{ root: "cursor-default m-0 h-20 text-R400 hover:text-R300" }}
    >
      <Icon name="exclamation-mark-octagon" size="20" weight="semibold" />
    </InputAdornment>
  </Tooltip>
);
