import { Button } from '@/components/ui/button'
import { Separator } from '@/components/ui/separator'
import Layout from '@/hoc/Layout'
import { NextPage } from 'next'
import Image from 'next/image'

const ComparePage: NextPage = () => {
    return (
        <Layout>
            <div className='mt-24 px-20'>
                <div className='flex border-b border-border'>
                    <div className='w-[300px] flex flex-col justify-center items-center border-l border-border pb-5'>
                        <Image
                            src='https://shinan.storage.iran.liara.space/media-file/30661b3bde87834d3feae30953d5fc63232d78f181e7fed0.png'
                            alt='compare'
                            width={150}
                            height={150}
                            className='max-w-[100px] max-h-[100px] object-contain'
                        />

                        <div className='mt-6 font-light text-sm'>
                            رومیزی سندس کد T-2112 طرح فرش
                        </div>

                        <div className='mt-8 text-sm font-light'>
                            260,000 <span className='text-[10px]'>تومان</span>
                        </div>

                        <div className='mt-5'>
                            <Button
                            >
                                افزودن به سبد
                            </Button>
                        </div>
                    </div>
                    <div className='w-[300px] flex flex-col justify-center items-center border-l border-border pb-5'>
                        <Image
                            src='https://shinan.storage.iran.liara.space/media-file/30661b3bde87834d3feae30953d5fc63232d78f181e7fed0.png'
                            alt='compare'
                            width={150}
                            height={150}
                            className='max-w-[100px] max-h-[100px] object-contain'
                        />

                        <div className='mt-6 font-light text-sm'>
                            رومیزی سندس کد T-2112 طرح فرش
                        </div>

                        <div className='mt-8 text-sm font-light'>
                            260,000 <span className='text-[10px]'>تومان</span>
                        </div>

                        <div className='mt-5'>
                            <Button
                            >
                                افزودن به سبد
                            </Button>
                        </div>
                    </div>
                </div>

                <div className='mt-8'>
                    <div className='text-sm font-light'>
                        مشخصات
                    </div>
                </div>

                <div className='mt-9 border-b border-border pb-7'>
                    <div className='text-[#999999] text-sm'>وزن</div>

                    <div className='flex mt-6 font-light'>
                        <div className='w-[300px]'>
                            350 g
                        </div>
                        <div className='w-[300px] flex gap-6'>
                            <Separator orientation='vertical' />
                            350 g
                        </div>
                    </div>
                </div>
            </div>
        </Layout>
    )
}

export default ComparePage