import React, { CSSProperties, ReactNode } from "react";
import { Select } from "antd";
import DropdownIcon from "../Icon/DropdownIcon";
import DownArrowIcon from "../Icon/DownArrowIcon";

interface IvoryCustomSelectProps {
  placeholder?: string;
  onChange?: (t: any) => void;
  className?: string;
  value?: string | number;
  max?: number;
  disabled?: boolean;
  loading?: boolean;
  children: JSX.Element | JSX.Element[];
  allowClear?: boolean;
  defaultValue?: string;
  required?: boolean;
  style?: CSSProperties;
  prefixIcon?: ReactNode;
  downArrow?: boolean;
}
const CustomSelect = ({
  placeholder = "",
  onChange,
  loading = false,
  disabled,
  children,
  prefixIcon,
  className = "",
  allowClear = false,
  //onFocus,
  style,
  downArrow = false,
  defaultValue,
}: IvoryCustomSelectProps) => {
  return (
    <div className="relative">
      {prefixIcon && <div className="prefix-icon">{prefixIcon}</div>}
      <Select
        style={style}
        className={`ivry-select ${className}`}
        loading={loading}
        disabled={disabled}
        defaultValue={defaultValue}
        placeholder={placeholder}
        onChange={onChange}
        allowClear={allowClear}
        //onFocus={onFocus}
        suffixIcon={
          !downArrow ? (
            <DropdownIcon className="ant-select-suffix" />
          ) : (
            <DownArrowIcon />
          )
        }
      >
        {children}
      </Select>
    </div>
  );
};

export default CustomSelect;