import React, { useState } from "react";
import Dropdown from "react-dropdown-package";
import "./your-custom-styles.css";

const options = [
  { value: "option1", label: "Option 1" },
  { value: "option2", label: "Option 2" },
  { value: "option3", label: "Option 3" },
];

const App = () => {
  const [selected, setSelected] = useState(options[0].value);

  const handleSelect = (selectedValue) => {
    setSelected(selectedValue);
    console.log(selectedValue);
  };

  return (
    <Dropdown
      options={options}
      selected={selected}
      onSelectedChange={handleSelect}
      placeholder="Please select an option"
      isDisabled={false}
      customClasses={{
        container: "my-dropdown",
        button: "my-toggle",
        list: "my-menu",
        listItem: "my-item",
        chevron: "my-chevron",
      }}
      buttonWidth={150} // Example of custom button width
      listWidth={200}   // Example of custom list width
      buttonHeight={40} // Example of custom button height
      listHeight={200}  // Example of custom list height
      customIcons={{
        chevron: <MyCustomChevronIcon />
      }}
      onOpen={() => console.log('Dropdown opened')}
      onClose={() => console.log('Dropdown closed')}
    />
  );
};

export default App;