import { FC } from 'react'
import RobotImage from '../../assets/images/robot.jpeg'
import { useTranslation } from 'react-i18next'
import Button from '../../components/Button'
import Rate from 'rc-rate'
import ServiceImages from './components/ServiceImages'
import Input from '../../components/Input'
import Textarea from '../../components/Textarea'
import AvatarImage from '../../assets/images/Avatar.png'
import ServiceHeader from './components/ServiceHeader'

const DetailService: FC = () => {

    const { t } = useTranslation('global')

    return (
        <div className='w-full flex gap-6 mt-4'>

            <div className='flex-1 max-w-full'>

                <ServiceHeader />
                <div className='mt-8 flex overflowX justify-between items-center xl:gap-8 gap-5'>
                    <div className='bg-white flex xl:min-w-max min-w-[127px] flex-1 flex-col justify-center items-center h-[109px] rounded-2xl py-6 px-4'>
                        <div className='text-description xl:text-xs text-[11px]'>
                            {t('service.company_develop')}
                        </div>
                        <div className='mt-3 text-sm'>
                            {t('service.company_danak')}
                        </div>
                    </div>
                    <div className='bg-white flex xl:min-w-max min-w-[127px] flex-1 flex-col justify-center items-center h-[109px] rounded-2xl py-6 px-4'>
                        <div className='text-description xl:text-xs text-[11px]'>
                            {t('service.user_count')}
                        </div>
                        <div className='mt-3 text-sm'>
                            +۵۰۰
                        </div>
                    </div>
                    <div className='bg-white flex xl:min-w-max min-w-[127px] flex-1 flex-col justify-center items-center h-[109px] rounded-2xl py-6 px-4'>
                        <div className='text-description xl:text-xs text-[11px]'>
                            {t('service.year_make')}
                        </div>
                        <div className='mt-3 text-sm'>
                            ۱۴۰۰
                        </div>
                    </div>
                    <div className='bg-white flex xl:min-w-max min-w-[127px] flex-1 flex-col justify-center items-center h-[109px] rounded-2xl py-6 px-4'>
                        <div className='text-description xl:text-xs text-[11px]'>
                            {t('service.lang_app')}
                        </div>
                        <div className='mt-3 text-sm'>
                            {t('service.persian')}
                        </div>
                    </div>
                    <div className='bg-white flex xl:min-w-max min-w-[127px] flex-1 flex-col justify-center items-center h-[109px] rounded-2xl py-6 px-4'>
                        <div className='text-description xl:text-xs text-[11px]'>
                            {t('service.score')}
                        </div>
                        <div className='mt-3 dltr flex gap-1 text-sm'>
                            <Rate
                                count={5}
                                style={{ fontSize: 15 }}
                                value={4}
                                disabled
                            />
                        </div>
                    </div>
                </div>

                <ServiceImages />

                <div className='mt-8 bg-white p-6 rounded-3xl'>
                    <div>
                        {t('service.compelete_description')}
                    </div>
                    <p className='text-[11px] mt-4 leading-6'>
                        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
                    </p>
                </div>

                <div className='mt-8 flex xl:flex-row flex-col gap-8 items-start'>
                    <div className='bg-white p-6 rounded-3xl xl:w-[360px] w-full'>
                        <div>
                            {t('service.submit_comment')}
                        </div>
                        <div className='text-xs mt-4'>
                            {t('service.hint_comment')}
                        </div>

                        <div className='mt-6 text-description text-sm'>
                            <div>
                                {t('service.score')}
                            </div>
                            <div className='mt-2 dltr flex justify-end'>
                                <Rate
                                    count={5}
                                    style={{ fontSize: 22 }}
                                />
                            </div>

                            <div className='mt-6'>
                                <Input
                                    label={t('service.fullName')}
                                    placeholder={t('service.enter_your_name')}
                                />
                            </div>
                            <div className='mt-6'>
                                <Input
                                    label={t('service.title')}
                                    placeholder={t('service.enter_title_comment')}
                                />
                            </div>

                            <div className='mt-6'>
                                <Textarea
                                    label={t('service.your_comment')}
                                    placeholder={t('service.write_your_comment')}
                                />
                            </div>

                            <div className='mt-6'>
                                <Button
                                    label={t('service.submit_comment')}
                                />
                            </div>
                        </div>
                    </div>
                    <div className='flex-1 max-w-full bg-white p-6 rounded-3xl'>
                        <div className='text-sm'>
                            {t('service.users_comments')}
                        </div>

                        <div className='mt-5 border border-border rounded-3xl p-6'>
                            <div className='flex gap-2 items-center'>
                                <img src={AvatarImage} className='size-6 rounded-full object-cover' />
                                <div className='text-description text-xs'>
                                    فروغ براتی
                                </div>
                            </div>

                            <div className='mt-4 flex justify-between'>
                                <div className='text-sm max-w-[70%] truncate'>
                                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
                                </div>
                                <div className='text-xs text-description'>
                                    ۳ روز پیش
                                </div>
                            </div>

                            <div className='mt-2'>
                                <Rate
                                    disabled
                                    value={5}
                                    count={5}
                                    style={{ fontSize: 14 }}
                                />
                            </div>

                            <div className='mt-4 text-[11px] leading-6'>
                                لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را ...
                            </div>
                        </div>
                        <div className='mt-5 border border-border rounded-3xl p-6'>
                            <div className='flex gap-2 items-center'>
                                <img src={AvatarImage} className='size-6 rounded-full object-cover' />
                                <div className='text-description text-xs'>
                                    فروغ براتی
                                </div>
                            </div>

                            <div className='mt-4 flex justify-between'>
                                <div className='text-sm max-w-[70%] truncate'>
                                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
                                </div>
                                <div className='text-xs text-description'>
                                    ۳ روز پیش
                                </div>
                            </div>

                            <div className='mt-2'>
                                <Rate
                                    disabled
                                    value={5}
                                    count={5}
                                    style={{ fontSize: 14 }}
                                />
                            </div>

                            <div className='mt-4 text-[11px] leading-6'>
                                لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را ...
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div className='bg-white w-sidebar h-fit hidden xl:block rounded-3xl overflow-hidden relative'>
                <img
                    src={RobotImage}
                    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 DetailService