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

type LabledDropdownProps = {
  defaultOption: string; // Initial active option
  options: string[]; // Array of dropdown options
  label?: string; // Customizable label text
  onSelect?: (option: string) => void; // Callback when option is selected
  className?: string; // Additional className for styling
  disabled?: boolean; // Disable dropdown
  search?: boolean; // Enable/disable search functionality
};

const LabledDropdown: React.FC<LabledDropdownProps> = ({ 
  defaultOption, 
  options, 
  label = "Type",
  onSelect,
  className = "",
  search = false
}) => {
  const [activeOption, setActiveOption] = useState(defaultOption);

  // Update active option if defaultOption changes
  useEffect(() => {
    setActiveOption(defaultOption);
  }, [defaultOption]);

  const handleSelect = (option: string) => {
    setActiveOption(option);
    if (onSelect) {
      onSelect(option);
    }
  };

  return (
    <div className={`value-field-container ${className}`}>
      <div className="label">{label}</div>
      <RegularDropDown
        header={activeOption}
        options={options}
        onSelect={handleSelect}
        search={search}
      />
    </div>
  );
};

export default LabledDropdown;