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<'year' | '3month' | 'month'>('year')

    return (
        <div className='w-full p-6 bg-white rounded-3xl flex justify-between'>
            <div className='flex gap-8'>
                <div className='size-[70px] bg-blue-400 rounded-xl'></div>
                <div>
                    <div>
                        دی منو
                    </div>
                    <div className='text-xs mt-3 text-[#4E505A]'>
                        منوی رستوران
                    </div>
                    <p className='text-description mt-1 text-[11px]'>
                        دی منو، راهی ساده و هوشمند برای مدیریت منو شما!
                    </p>
                    <div className='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 items-end'>
                <div className='size-9 bg-description rounded-xl flex justify-center items-center'>
                    <img src={ShareIcon} className='w-4' />
                </div>
                <div className='flex gap-4 items-center'>
                    <div className='text-xs whitespace-nowrap'>2,000,000 تومان {t('service.year')}</div>
                    <Button
                        className='bg-description 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