import { FC } from 'react'
import BannerImage from '../../assets/images/banner.png'
import { useTranslation } from 'react-i18next'
import { ArrowLeft, Element3, Messages3, NotificationStatus, Teacher } from 'iconsax-react'
import ItemDashboard from './components/ItemDashboard'
import TitleLine from '../../components/TitleLine'
import AccessbilityImage from '../../assets/images/accessbility.jpg'
import BoxNewAccessbility from './components/BoxNewAccessbility'
import DanakLearning from './components/DanakLearning'

const Home: FC = () => {

    const { t } = useTranslation('global')

    return (
        <div className='w-full flex gap-6'>
            <div className='flex-1'>
                <div className='relative'>
                    <img src={BannerImage} className='w-full rounded-3xl' />
                    <div className='absolute  size-full top-0 right-0 py-6 px-8 flex flex-col justify-between'>
                        <button className="px-8 w-fit py-1.5 bg-white bg-opacity-10 text-white text-sm rounded-full shadow-md ">
                            {t('home.new')}
                        </button>

                        <div className='max-w-[340px] font-medium text-white text-lg leading-10'>
                            <div>
                                سفارش نرم‌افزار اختصاصی: سرمایه‌ای برای آینده یا فقط هزینه‌ای برای امروز؟
                            </div>
                            <div className='mt-3 text-border text-xs'>
                                ۸ دقیقه مطالعه
                            </div>
                            <button className='mt-3 px-4 h-9 flex gap-2 items-center text-xs rounded-2.5 bg-black text-white'>
                                <div>
                                    {t('home.study')}
                                </div>
                                <ArrowLeft size={14} color='white' />
                            </button>
                        </div>
                    </div>
                </div>

                <div className='mt-8 text-sm flex gap-6 items-center'>
                    <ItemDashboard
                        title={t('home.myservice')}
                        icon={<Element3 size={20} color='black' />}
                        color='#00D16C'
                        count={4}
                        description={t('home.active_service')}
                    />

                    <ItemDashboard
                        title={t('home.ticket')}
                        icon={<Messages3 size={20} color='black' />}
                        color='#FF7B00'
                        count={4}
                        description={t('home.unread_messages')}
                    />

                    <ItemDashboard
                        title={t('home.announcement')}
                        icon={<NotificationStatus size={20} color='black' />}
                        color='#FF0000'
                        count={4}
                        description={t('home.unread_announcement')}
                    />

                    <ItemDashboard
                        title={t('home.learnings')}
                        icon={<Teacher size={20} color='black' />}
                        color='#0047FF'
                        count={4}
                        description={t('home.learning')}
                    />

                </div>

                <div className='w-full mt-8'>
                    <TitleLine title={t('home.access')} />
                </div>

                <div className='mt-8 flex gap-6 items-center'>
                    <div className='flex-1 h-[160px] rounded-3xl bg-white flex flex-col gap-4 justify-center items-center'>
                        <img src={AccessbilityImage} className='w-10' />
                        <div className='text-xs'>
                            {t('home.add_access')}
                        </div>
                    </div>
                    <BoxNewAccessbility />
                    <BoxNewAccessbility />
                    <BoxNewAccessbility />
                </div>
            </div>
            <DanakLearning />
        </div>
    )
}

export default Home