import React from "react";
import classNames from "classnames";
import { DropdownBox } from "../../dropdown";
import { useConfig } from "../../util";
import { CascaderBoxProps } from "../CascaderProps";
import { CascaderMenuLists } from "./CascaderMenuLists";
import { CascaderMultiMenuLists } from "./CascaderMultiMenuLists";

export function CascaderMenuBox({
  multiple,
  className,
  style,
  ...props
}: CascaderBoxProps) {
  const { classPrefix } = useConfig();

  return (
    <DropdownBox
      className={classNames(className, "size-auto-width")}
      style={style}
    >
      <div
        className={`${classPrefix}-cascader-menu ${classPrefix}-cascader-menu--thin`}
      >
        {multiple ? (
          <CascaderMultiMenuLists {...props} />
        ) : (
          <CascaderMenuLists {...props} />
        )}
      </div>
    </DropdownBox>
  );
}

CascaderMenuBox.displayName = "CascaderMenuBox";