import React from "react";
import useSelect from "../common/useSelect"; // your custom hook

const ActivityDropdown = ({ options, value, onChange, register, error }) => {
  const selectRef = useSelect({ minimumResultsForSearch: 5 });

  return (
    <div className="col-12 col-md-12">
      <label className="form-label" htmlFor="activityID">
        Select Activity
      </label>
      <select
        id="activityID"
        name="activityID"
        ref={selectRef}
        className="select2 form-select form-select-sm"
        aria-label="Default select example"
        {...register("activityID", { valueAsNumber: true })}
        value={value}
        onChange={onChange}
      >
        <option value="0">Select Activity</option>
        {options.map((activity) => (
          <option key={activity.id} value={activity.id}>
            {activity.activityName}
          </option>
        ))}
      </select>
      {error && <p className="danger-text">{error.message}</p>}
    </div>
  );
};

export default ActivityDropdown;