import { Menu } from "@nutui/nutui-react-taro";
import styles from "./index.module.scss";
import { useState } from "react";

interface IProps {
  options: { text: string; value: string }[];
  value: string;
  onChange: (value: string) => void;
  wrapperClassName?: string;
  itemClassName?: string;
}

const MenuComponent = (props: IProps) => {
  const { options, value, onChange, wrapperClassName, itemClassName } = props;
  const [isChange, setIsChange] = useState(false);

  const handleChange = (value: string) => {
    setIsChange(true);
    onChange && onChange(value);
  };

  return (
    <Menu
      className={`${styles.menuWrap} ${wrapperClassName} ${isChange ? styles.active : ""}`}
      activeColor="#000"
    >
      <Menu.Item
        className={`${styles.menuItem} ${itemClassName}`}
        options={options}
        defaultValue={value}
        onChange={handleChange}
      />
    </Menu>
  );
};

export default MenuComponent;