import { FC } from 'react'
import { useTranslation } from 'react-i18next'
import Input from '../../components/Input'
import Textarea from '../../components/Textarea'
import UploadBox from '../../components/UploadBox'
import Button from '../../components/Button'
import { TickSquare } from 'iconsax-react'

const AddCriticisms: FC = () => {

    const { t } = useTranslation('global')

    return (
        <div className='mt-4 text-sm'>
            <div>
                {t('criticisms.criticisms')}
            </div>

            <div className='flex gap-6 xl:mt-8 mt-5'>
                <div className='flex-1 bg-white py-8 xl:px-10 px-5 rounded-3xl'>
                    <div>
                        {t('criticisms.submit_your_criticisms')}
                    </div>

                    <div className='mt-3 text-xs text-description'>
                        {t('criticisms.description_criticisms')}
                    </div>

                    <div className='mt-10'>
                        <Input
                            label={t('criticisms.subject')}
                            placeholder={t('criticisms.enter_your_subject')}
                        />
                    </div>

                    <div className='mt-7'>
                        <Textarea
                            label={t('criticisms.description')}
                            placeholder={t('criticisms.enter_description')}
                        />
                    </div>

                    <div className='mt-7'>
                        <UploadBox
                            label={t('attachment')}
                        />
                    </div>


                    <div className='mt-20 flex justify-end'>
                        <Button
                            label={t('ticket.send')}
                            className='max-w-[100px]'
                        />
                    </div>
                </div>

                <div className='bg-white w-sidebar hidden xl:block py-10 px-5 h-fit rounded-3xl'>
                    <div className='text-sm'>
                        انتقادات و پیشنهادهای شما برای ما راه گشاست:
                    </div>

                    <div className='mt-6'>
                        <div className='flex items-start gap-2 border-b pb-5'>
                            <div>
                                <TickSquare size={20} color='black' variant='Bold' />
                            </div>
                            <div className='text-description text-xs leading-5'>
                                در صورتیکه از دپارتمان خاصی انتقادی دارید لطفا در متن توضیحات مشخص نمایید تا ما راحت تر بتوانیم نقد شما را بررسی کنیم.
                            </div>
                        </div>
                        <div className='flex items-start gap-2 mt-6 border-b pb-5'>
                            <div>
                                <TickSquare size={20} color='black' variant='Bold' />
                            </div>
                            <div className='text-description text-xs leading-5'>
                                نظرات ارزشمند شما به ما کمک میکند تا بهتر بتوانید خدمات و محصولاتمان را مطابق خواسته و نیاز شما تنظیم کنیم ، از این رو خواهشمندیم نظرات و نقد های ارزشمند خود را برای ما ارسال نمایید.
                            </div>
                        </div>
                        <div className='flex items-start gap-2 mt-6'>
                            <div>
                                <TickSquare size={20} color='black' variant='Bold' />
                            </div>
                            <div className='text-description text-xs leading-5'>
                                تمامی نظرات توسط داناک بررسی و پردازش شده و در صورت نیاز شما را در جریان پردازش اطلاعات قرار خواهیم داد، ممکن است همکاران ما در واحد تجربه مشتری با شما تماس گرفته و جزییات بیشتری را پیرامون نقد و نظر شما جویا شوند.
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    )
}

export default AddCriticisms