import { FC } from 'react'
import { useTranslation } from 'react-i18next'
import Input from '../../components/Input'
import Select from '../../components/Select'
import ServiceSection from '../../components/ServiceSection'
import StatusCircle from '../../components/StatusCircle'
import BannerImage from '../../assets/images/banner.png'
import { Link } from 'react-router-dom'
import { Pages } from '../../config/Pages'

const MyServices: FC = () => {

    const { t } = useTranslation('global')

    return (
        <div className='w-full flex gap-6 mt-4'>
            <div className='flex-1'>
                <div>
                    {t('service.my_service')}
                </div>

                <div className='mt-8 flex  xl:gap-6 gap-4 items-center'>
                    <div className='xl:w-[300px] w-full'>
                        <Input
                            variant='search'
                            placeholder={t('service.search')}
                            className='bg-white w-full'
                        />
                    </div>

                    <div>
                        <Select
                            items={[
                                { label: t('all'), value: 'all' },
                                { label: 'Active', value: 'active' },
                                { label: 'Inactive', value: 'inactive' },
                            ]}
                            className='max-w-[100px]'
                        />
                    </div>
                </div>

                <div className='flex flex-wrap xl:gap-6 gap-4 items-center mt-8'>

                    <Link to={Pages.services.detail + '1'} className='flex-1 min-w-[40%] xl:min-w-[20%] bg-white rounded-3xl p-6'>
                        <ServiceSection
                        />
                        <div className='mt-6 flex gap-1 items-center'>
                            <StatusCircle
                                color='#00BA4B'
                            />
                            <div className='text-xs text-description'>1 {t('service.active_menu')}</div>
                        </div>

                    </Link>
                    <Link to={Pages.services.detail + '1'} className='flex-1 min-w-[40%] xl:min-w-[20%] bg-white rounded-3xl p-6'>
                        <ServiceSection
                        />
                        <div className='mt-6 flex gap-1 items-center'>
                            <StatusCircle
                                color='#00BA4B'
                            />
                            <div className='text-xs text-description'>1 {t('service.active_menu')}</div>
                        </div>
                    </Link>
                    <Link to={Pages.services.detail + '1'} className='flex-1 min-w-[40%] xl:min-w-[20%] bg-white rounded-3xl p-6'>
                        <ServiceSection
                        />
                        <div className='mt-6 flex gap-1 items-center'>
                            <StatusCircle
                                color='#00BA4B'
                            />
                            <div className='text-xs text-description'>1 {t('service.active_menu')}</div>
                        </div>
                    </Link>

                    <Link to={Pages.services.detail + '1'} className='flex-1 min-w-[40%] xl:min-w-[20%] bg-white rounded-3xl p-6'>
                        <ServiceSection
                        />
                        <div className='mt-6 flex gap-1 items-center'>
                            <StatusCircle
                                color='#00BA4B'
                            />
                            <div className='text-xs text-description'>1 {t('service.active_menu')}</div>
                        </div>

                    </Link>
                </div>
            </div>
            <div className='bg-white w-sidebar hidden xl:block rounded-3xl overflow-hidden relative'>
                <img
                    src={BannerImage}
                    className='w-full backdrop-blur-[100px] h-[550px] object-cover'
                />

                <div className='absolute flex items-center px-4 w-full bottom-0 h-[86px] bg-black bg-opacity-5 backdrop-blur-[14px]'>
                    <div className='max-w-[80%] text-sm leading-6 text-white'>
                        سفارش نرم‌افزار اختصاصی: سرمایه‌ای برای آینده یا فقط هزینه‌ای برای امروز؟
                    </div>
                </div>
            </div>
        </div>
    )
}

export default MyServices