import { FC } from 'react'
import empty from '../../../assets/images/myservices_empty_icon.png'
import { useTranslation } from 'react-i18next'
import Button from '../../../components/Button'
import { Add } from 'iconsax-react'
import { Link } from 'react-router-dom'
import { Pages } from '../../../config/Pages'

const EmptyMyService: FC = () => {
    const { t } = useTranslation('global')
    return (
        <div className='bg-white xl:p-8 p-4 rounded-3xl w-full'>
            <div className='flex flex-col items-center justify-center'>
                <img src={empty} alt='empty' className='w-[85px]' />
                <div className='mt-6 text-xs'>
                    {t('empty.empty_my_service')}
                </div>
                <Link to={Pages.services.other} className='mt-6'>
                    <Button
                        className='w-full px-4'
                    >
                        <div className='flex items-center gap-2'>
                            <Add size={20} color='white' />
                            {t('empty.add_service')}
                        </div>
                    </Button>
                </Link>
            </div>
        </div>
    )
}

export default EmptyMyService