import { FC } from 'react'
import { useTranslation } from 'react-i18next'
import { ArrowLeft } from 'iconsax-react'
import { useGetLearnings } from '../../learning/hooks/useLearningData'
import { LearningItemType } from '../../learning/types/LearningTypes'
import moment from 'moment-jalaali'
import { Link } from 'react-router-dom'
import { Pages } from '../../../config/Pages'

const DanakLearning: FC = () => {

    const { t } = useTranslation('global')
    const getLearnings = useGetLearnings('', 5)

    return (
        <div className='bg-white w-sidebar text-xs hidden 2xl:block h-fit px-5 py-7 rounded-3xl'>
            <div className='flex justify-between items-center'>
                <div>
                    {t('home.danak_learning')}
                </div>
                <Link to={Pages.learning.list} className='flex gap-2 items-center text-[10px]'>
                    <div>{t('home.see_all')}</div>
                    <ArrowLeft size={12} color='black' />
                </Link>
            </div>

            <div>
                {
                    getLearnings.data?.data?.learnings?.map((item: LearningItemType) => {
                        return (
                            <div key={item.id} className='flex gap-3 mt-7'>
                                <Link to={Pages.learning.detail + item.id}>
                                    <img src={item.coverUrl} alt='danak-learning-1' className='w-24  object-cover rounded-2xl' />
                                </Link>

                                <div className='text-xs'>
                                    <div className='leading-5'>
                                        {item.title}
                                    </div>
                                    <div className='flex gap-1 text-[11px] mt-3 text-description'>
                                        <div>{item.category.name} ,</div>
                                        <div>{item.videoDuration} دقیقه</div>
                                    </div>
                                    <div className='text-description text-[11px] mt-2'>
                                        {moment(item.createdAt).format('jYYYY/jMM/jDD')}
                                    </div>
                                </div>
                            </div>
                        )
                    }
                    )
                }
            </div>
        </div>
    )
}

export default DanakLearning