import { useEffect, useState } from '@wordpress/element';
import { SelectControl as WordpressSelect } from '@wordpress/components';

type SelectControlProps = {
  className?: string;
  defaultValue: string;
  children?: React.ReactNode;
  options: any[];
  label?: string;
  onChange?: (value: string) => void;
};

export const SelectControl = ({
  onChange,
  className,
  defaultValue,
  options,
  label = '',
}: SelectControlProps) => {
  const [value, setValue] = useState('');

  useEffect(() => {
    setValue(defaultValue);
  }, []);

  const handleChange = (value: string) => {
    setValue(value);
    if (onChange) {
      onChange(value);
    }
  };

  return (
    <div className={className}>
      {label && <label>{label}</label>}
      <WordpressSelect
        value={value}
        onChange={handleChange}
        options={options}
      />
    </div>
  );
};