import React from 'react';
import { useField, useFormikContext } from 'formik';
import ReactSelect from 'react-select';

const CustomSelect = ({ label, options, ...props }: { label: string, options: any, props: Array<any> }) => {
  const { setFieldValue } = useFormikContext();
  const [field, meta] = useField(props);

  const handleChange = (selectedOption: string) => {
    setFieldValue(field.name, selectedOption);
  };

  return (
    <div>
      <label>{label}</label>
      <ReactSelect
        {...field}
        {...props}
        value={field.value}
        onChange={handleChange}
        options={options}
      />
      {meta.touched && meta.error ? (
        <div className="text-danger">{meta.error}</div>
      ) : null}
    </div>
  );
};

export default CustomSelect;