import { Button } from '@/components/ui/button'
import { Separator } from '@/components/ui/separator'
import { ArchiveTick, BoxTick, I3DRotate } from 'iconsax-react'
import React from 'react'

const ShopInformation = () => {
    return (
        <div className='w-[325px] bg-[#FAFAFA] rounded-[10px] p-7 border border-border h-fit sticky top-[170px] self-start'>
            <div className='text-lg text-[#191919]'>
                فروشنده
            </div>

            <div className='mt-9 flex gap-3 border-b border-border pb-4'>
                <div className='size-7 rounded-full bg-primary'></div>
                <div>
                    <div className='text-[#333333] text-sm'>فروشگاه سندس</div>
                    <div className='mt-2 text-xs text-[#999999] font-light flex items-center gap-2'>
                        <div>
                            <span className='text-[#019907]'>50%</span> رضایت کالا
                        </div>
                        <Separator orientation='vertical' style={{ height: 20 }} />
                        <div>عملکرد خیلی خوب</div>
                    </div>
                </div>
            </div>

            <div className='flex gap-4 text-sm font-light border-b border-border pb-4 mt-4'>
                <ArchiveTick size={20} color='#333333' />
                <div>گارانتی اصالت و سلامت فیزیکی کالا</div>
            </div>

            <div className='mt-4'>
                <div className='flex gap-4 text-sm font-light'>
                    <ArchiveTick size={20} color='#333333' />
                    <div>گارانتی اصالت و سلامت فیزیکی کالا</div>
                </div>
            </div>
            <div className='mt-6 border-b border-border pb-4'>
                <div className='flex gap-4 text-sm font-light'>
                    <BoxTick size={20} color='blue' />
                    <div className='text-[#999999]'>ارسال از سندس حداکثر پس از 3 روز کاری</div>
                </div>
            </div>

            <div className='flex gap-4 text-sm font-light border-b border-border pb-4 mt-4'>
                <I3DRotate size={20} color='blue' />
                <div className='text-primary'>گارانتی اصالت و سلامت فیزیکی کالا</div>
            </div>

            <div className='mt-4 text-sm text-[#999999] font-light flex justify-between'>
                <div>قیمت برای شما</div>
                <div className='line-through text-base'>70,400,000</div>
            </div>

            <div className='mt-3 flex justify-between items-center'>
                <div className='h-6 text-xs px-3 bg-primary rounded-full text-white w-fit flex items-center justify-center'>
                    5%
                </div>
                <div>
                    <span className='text-lg'>70,400,000</span> <span className='text-xs'>تومان</span>
                </div>
            </div>

            <Button className='w-full mt-8'>
                افزودن به سبد خرید
            </Button>
            <Button className='w-full mt-3 bg-[#323232]'>
                گفتگو با فروشنده
            </Button>
        </div>
    )
}

export default ShopInformation