import React, { FC, ReactNode } from "react";
import { PulldownIcon } from "@icons/Pulldown";
import clsx from "clsx";
interface Props {
  children?: ReactNode | string;
  open: boolean;
  setOpen?: (bool: boolean) => void;
  className?: string;
  disable?: boolean;
}

export const SelectButton: FC<Props> = props => {
  const { disable = false } = props;
  return (
    <div
      onClick={() => !disable && props.setOpen?.(true)}
      className={clsx("flex items-center hover:text-gray-16", props.className, disable ? "notAllowedCursor" : "")}
    >
      {props.children}
      <PulldownIcon active={props.open} className="ml-[8px]"></PulldownIcon>
    </div>
  );
};

SelectButton.defaultProps = {
  open: false
};