import React from "react";
import cn from "classnames";
import Icon, { IIconProps } from "../icon/icon";
import DropdownItem, { IDropdownItemProps } from "../dropdown/dropdown-item";

interface ISelectItem extends IDropdownItemProps {
  icon?: IIconProps;
  onClick?: () => void;
}

const SelectItem: React.FC<ISelectItem> = props => {
  const { icon, className, children, onClick, isActive, isDisabled, ...rest } = props;

  return (
    <DropdownItem
      as="span"
      className={cn(className, "d-flex", "align-items-center", "cursor-pointer")}
      onClick={onClick}
      isActive={isActive}
      {...rest}
    >
      <>
        {icon ? <Icon {...icon} size={icon.size || "sm"} className="mr-3 flex-shrink-0" /> : null}

        <div className="text-truncate">{children}</div>
      </>
    </DropdownItem>
  );
};

SelectItem.displayName = "SelectItem";
SelectItem.defaultProps = {};

export default SelectItem;