import { useDropzone } from "react-dropzone";
import Link from "next/link";
import { useState, useEffect } from "react";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import jsonpath from "jsonpath";
import _ from "lodash";

const FileUpload = () => {
    const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
    const files = acceptedFiles.map((file) => (
        <li key={file.path}>
            {file.path} - {file.size} bytes
        </li>
    ));
    return (
        <div className="govuk-grid-column-full">
            <div className="govuk-grid-row">
                <div className="govuk-form-group">
                    <section className="container">
                        <div
                            {...getRootProps({
                                className: "dropzone",
                            })}
                        >
                            <input {...getInputProps()} />
                            <p>
                                Drag and drop files here or click to select
                                files
                            </p>
                        </div>
                        <aside>
                            <h4>Files</h4>
                            <ul>{files}</ul>
                        </aside>
                    </section>
                </div>
            </div>
        </div>
    );
};
export default FileUpload;