import { useEffect, useState } from 'react';
import { Dropzone, ExtFile, FileMosaic } from '@files-ui/react';
export const DropZoneComp = ({
 setDocuments,
}: {
 setDocuments?: (files: ExtFile[]) => void;
}) => {
 const [files, setFiles] = useState<ExtFile[]>([]);
 const updateFiles = (incommingFiles: ExtFile[]) => {
 setFiles(incommingFiles);
 setDocuments?.(files);
 };
 const removeFile = (id: number | string | undefined) => {
 setFiles(files.filter((x) => x.id !== id));
 };
 return (
 <div className="flex flex-col max-w-full overflow-hidden">
 <Dropzone maxFileSize={20000} value={files} onChange={updateFiles}>
 {files.length > 0 &&
 files.map((file: ExtFile) => (
 <FileMosaic
 {...file}
 onDelete={removeFile}
 key={file.id}
 info
 preview
 />
 ))}
 </Dropzone>
 </div>
 );
};
export default DropZoneComp;