import { FC, useCallback, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { useDropzone } from 'react-dropzone'


type Props = {
    label: string,
}

const UploadBox: FC<Props> = (props: Props) => {

    const { t } = useTranslation('global')
    const [file, setFile] = useState<File>()

    const onDrop = useCallback((acceptedFiles: File[]) => {
        setFile(acceptedFiles[0])
    }, [])
    const { getRootProps, getInputProps } = useDropzone({ onDrop })


    return (
        <div>
            <div className='text-sm'>{props.label}</div>
            <div className='w-full h-10 mt-1 border border-border rounded-xl items-center px-2 flex gap-2.5'>
                <button {...getRootProps()} className=' w-fit h-7 rounded-lg text-xs px-6 bg-secondary'>
                    <input {...getInputProps()} />

                    {t('select_file')}
                </button>

                <div className='text-description text-xs'>
                    {
                        file ?
                            file.name
                            :
                            t('no_select_file')
                    }
                </div>
            </div>
        </div>
    )
}

export default UploadBox