import { forwardRef, useImperativeHandle, useRef } from "react";
export const ImagePicker = forwardRef(function ImagePicker({ label, accept, onFilesSelect, multiple, className, disabled }, ref) {
    const inputRef = useRef(null);
    useImperativeHandle(ref, () => {
        return {
            open() {
                inputRef.current?.click();
            },
        };
    }, []);
    return (<label ref={inputRef} className={`MediaPicker${className ? ` ${className}` : ""}`}>
      <span>{label}</span>
      <input type="file" accept={accept} multiple={multiple} disabled={disabled} onChange={(event) => {
            const files = event.target.files;
            onFilesSelect(files ? [...files] : []);
            event.target.files = null;
            event.target.value = "";
        }}/>
    </label>);
});