import { FC, useState } from 'react'
import RadioGroup from '../../../components/RadioGroup'
import { useTranslation } from 'react-i18next'
import ShareIcon from '../../../assets/images/share.svg'
import Button from '../../../components/Button'
import { ArrowLeft } from 'iconsax-react'

const ServiceHeader: FC = () => {

    const { t } = useTranslation('global')
    const [planSelected, setPlanSelected] = useState<string | boolean>('year')

    return (
        <div className='w-full p-6 bg-white rounded-3xl flex xl:flex-row flex-col xl:justify-between'>
            <div className='flex xl:gap-8 gap-4'>
                <div className='xl:size-[70px] size-[50px] bg-blue-400 rounded-xl'></div>
                <div>
                    <div>
                        دی منو
                    </div>
                    <div className='text-xs xl:mt-3 mt-1.5 text-[#4E505A]'>
                        منوی رستوران
                    </div>
                    <p className='text-description mt-1 text-[11px]'>
                        دی منو، راهی ساده و هوشمند برای مدیریت منو شما!
                    </p>
                    <div className='hidden xl:flex gap-5 mt-5'>
                        <RadioGroup
                            items={[
                                {
                                    label: t('service.year'),
                                    value: 'year'
                                },
                                {
                                    label: t('service.month3'),
                                    value: '3month'
                                },
                                {
                                    label: t('service.month'),
                                    value: 'month'
                                }
                            ]}
                            onChange={setPlanSelected}
                            selected={planSelected}
                        />
                    </div>
                </div>
            </div>

            <div className='flex flex-col justify-between xl:items-end'>
                <div className='xl:hidden flex gap-5 mt-5'>
                    <RadioGroup
                        items={[
                            {
                                label: t('service.year'),
                                value: 'year'
                            },
                            {
                                label: t('service.month3'),
                                value: '3month'
                            },
                            {
                                label: t('service.month'),
                                value: 'month'
                            }
                        ]}
                        onChange={setPlanSelected}
                        selected={planSelected}
                    />
                </div>
                <div className='size-9 hidden bg-description rounded-xl xl:flex justify-center items-center'>
                    <img src={ShareIcon} className='w-4' />
                </div>
                <div className='flex gap-4 mt-5 xl:mt-0 items-center justify-between xl:justify-normal'>
                    <div className='text-xs whitespace-nowrap'>2,000,000 تومان {t('service.year')}</div>
                    <Button
                        className='bg-description xl:max-w-full max-w-[100px] text-xs h-8 bg-opacity-20 text-black px-4'
                    >
                        <div className='flex gap-1 items-center'>
                            <div>
                                {t('service.buy')}
                            </div>
                            <ArrowLeft className='size-4' color='black' />
                        </div>
                    </Button>
                </div>
            </div>
        </div>
    )
}

export default ServiceHeader