import cx from "classnames";
import React from "react";
import ConditionalWrapper from "../../utils/ConditionalWrapper";
import { Icon } from "../Icon";
import { InfoTooltip } from "../Tooltip";

interface ItemProps {
  icon: string;
  children: React.ReactNode;
  tooltip?: React.ReactNode;
  [key: string]: any;
}

const CLASS_ROOT = "icon-list";

export const Item: React.FC<ItemProps> = ({
  icon,
  children,
  tooltip,
  ...other
}) => (
  <li {...other}>
    <Icon name={icon} size="medium" className={`${CLASS_ROOT}__icon`} />
    <div className={cx(`${CLASS_ROOT}__content`, { "text-nowrap": tooltip })}>
      <ConditionalWrapper
        condition={!!tooltip}
        wrapper={
          <span className={`${CLASS_ROOT}__content-text`}>{children}</span>
        }
      >
        {children}
      </ConditionalWrapper>
      {tooltip && "\xa0"}
      {tooltip && (
        <InfoTooltip className="bold" placement="right">
          {tooltip}
        </InfoTooltip>
      )}
    </div>
  </li>
);

Item.displayName = "IconListItem";