import React, { useState, useEffect, ChangeEvent } from "react";
import { ISelectDropdownProps } from "typings";

const SelectDropdown: React.FC<ISelectDropdownProps> = (props) => {
  const [selectedValue, setSelectedValue] = useState("");

  useEffect(() => {
    if (!props.isActive) {
      setSelectedValue("");
    }
  }, [props.isActive]);

  const handleChange = (event: ChangeEvent<HTMLSelectElement>) => {
    setSelectedValue(event.target.value);
    if (props.onChange) {
      props.onChange(event.target.value);
    }
  };

  return (
    <select
      value={selectedValue}
      onChange={handleChange}
      className="text-black flex-1 p-2 border border-gray-300 rounded-lg hover:cursor-pointer"
    >
      <option value="" className="font-bold">
        Select resource to mine
      </option>
      <hr />
      {props.options.map((option, index) => (
        <option key={index} value={option.value}>
          {option.label}
        </option>
      ))}
    </select>
  );
};

export default SelectDropdown;