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'
import { Carousel } from "@material-tailwind/react";


const Home: FC = () => {

    const { t } = useTranslation('global')

    return (
        <div className='w-full flex gap-6'>
            <div className='flex-1'>
                <Carousel prevArrow={() => null} nextArrow={() => null} autoplay={false} className="rounded-xl h-fit dltr" placeholder="" onPointerEnterCapture={() => { }} onPointerLeaveCapture={() => { }} >
                    <div className='relative drtl'>
                        <img src={BannerImage} className='w-full rounded-3xl' />
                        <div className='absolute  size-full top-0 right-0 xl:py-6 py-4 xl:px-8 px-4 flex flex-col xl:justify-between'>
                            <div className='sm:flex hidden justify-end w-full'>
                                <button className="xl:px-8 px-4 w-fit xl:py-1.5 py-1 bg-white bg-opacity-10 text-white xl:text-sm text-xs rounded-full shadow-md ">
                                    {t('home.new')}
                                </button>
                            </div>

                            <div className='max-w-[340px] font-medium text-white text-lg leading-10'>
                                <div className='xl:tetx-base leading-7 text-xs truncate xl:overflow-auto'>
                                    سفارش نرم‌افزار اختصاصی: سرمایه‌ای برای آینده یا فقط هزینه‌ای برای امروز؟
                                </div>
                                <div className='xl:mt-3 mt-2 text-border text-xs'>
                                    ۸ دقیقه مطالعه
                                </div>
                                <button className='xl:mt-3 mt-2 xl:px-4 px-2 xl:h-9 h-6 flex gap-2 items-center xl:text-xs text-[10px] xl:rounded-2.5 rounded-lg bg-black text-white'>
                                    <div>
                                        {t('home.study')}
                                    </div>
                                    <ArrowLeft size={14} color='white' />
                                </button>
                            </div>
                        </div>
                    </div>
                    <div className='relative drtl'>
                        <img src={BannerImage} className='w-full rounded-3xl' />
                        <div className='absolute  size-full top-0 right-0 xl:py-6 py-4 xl:px-8 px-4 flex flex-col xl:justify-between'>
                            <div className='sm:flex hidden justify-end w-full'>
                                <button className="xl:px-8 px-4 w-fit xl:py-1.5 py-1 bg-white bg-opacity-10 text-white xl:text-sm text-xs rounded-full shadow-md ">
                                    {t('home.new')}
                                </button>
                            </div>

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

                <div className='mt-8 flex-wrap 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 flex-wrap gap-6 items-center'>
                    <div className='flex-1 min-w-[40%] xl:min-w-[20%] 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