import { FC } from 'react'
import { useTranslation } from 'react-i18next'
import UploadBoxDraggble from '../../../components/UploadBoxDraggble'

type Props = {
    onChangeVideoFile: (file: File) => void,
    onChangeCoverFile: (file: File) => void
}

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

    const { t } = useTranslation('global')

    return (
        <div className='bg-white mt-10 w-sidebar text-xs hidden 2xl:block h-fit px-5 py-7 rounded-3xl'>

            <div className='mt-8'>
                <div>{t('learning.learning_cover')}</div>
                <div className='mt-2'>
                    <UploadBoxDraggble
                        label={t('learning.upload_cover')}
                        onChange={(file: File[]) => props.onChangeCoverFile(file[0])}
                    />
                </div>
            </div>
            <div className='mt-8'>
                <div>{t('learning.video')}</div>
                <div className='mt-2'>
                    <UploadBoxDraggble
                        label={t('learning.upload_video')}
                        onChange={(file: File[]) => props.onChangeVideoFile(file[0])}
                        isFile
                    />
                </div>
            </div>
        </div>
    )
}

export default CreateLearningSidebar