import React, { useState } from "react";
import RegularDropDown from "./RegularDropDown";

type LabledDropdownProps = {
  defaultOption: string; // Initial active option
  options: string[]; // Array of dropdown options
};

const LabledDropdown: React.FC<LabledDropdownProps> = ({ defaultOption, options }) => {
  const [activeOption, setActiveOption] = useState(defaultOption); // State for active option

  const handleSelect = (option: string) => {
    setActiveOption(option); // Update the active option state
  };

  return (
    <div className="value-field-container">
      <div className="label">Type</div>
      <RegularDropDown
        header={activeOption} // Display the current active option
        options={options} // Use the options from props
        onSelect={handleSelect} // Handle option selection
        search = {false}
      />
    </div>
  );
};

export default LabledDropdown;