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



const ImageUploader: FC = () => {
   const { t } = useTranslation('global') 
   const [file, setFile] = useState<File>()
      const onDrop = useCallback((acceptedFiles: File[]) => {
           setFile(acceptedFiles[0])
       }, [])
       const { getRootProps, getInputProps } = useDropzone({ onDrop })
   
   return(
    <>
    <p className='mt-6 text-sm'>{t('blog.featured_image')}</p>
    <div
   {...getRootProps()} 
    className='py-12 border border-dashed border-[#8C90A3] rounded-lg mt-2 flex items-center justify-center'>
        <div className='flex flex-col items-center space-y-4'>
            <Image size={45} color='#8C90A3' variant="Bold" className='border-[3px] border-[#8C90A3] rounded-md'
            />
            <p className='text-sm text-[#8C90A3]'>
                {
                              file ?
                              file.name
                              :
                            t('ads.to_upload_message')

                }
                </p>
            <div className='flex gap-1'>
                <DocumentUpload
                    size={20}
                    color='black'
                />
                <button  className='text-sm'>
                <input {...getInputProps()} />
                    {t('ads.upload')}</button>
            </div>
        </div>
    </div>
    </>
   )
}
export default ImageUploader