import { css } from "@linaria/core";
import { Tooltip } from "ant-design-vue";

export const TipIcon = (props: {
  disable?: boolean;
  value?: number;
  icons: Array<(...args: any[]) => JSX.Element>;
  tips: Array<string | JSX.Element>;
}) => {
  const { tips, icons, value = 0, disable } = props;

  const tip = tips[value];
  const Icon = icons[value];

  return (
    <Tooltip title={tip}>
      <Icon class={[iconStyle, disable ? "icon_disable" : ""]} />
    </Tooltip>
  );
};

const iconStyle = css`
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;

  &.icon_disable {
    color: @inf-text-less-color;
    pointer-events: none;
    opacity: 0.5;
  }

  &:hover {
    background: rgba(0, 0, 0, 0.1);
  }
`;