'use client'
import { Button } from '@/components/ui/button'
import { Separator } from '@/components/ui/separator'
import { BoxTick, I3DRotate } from 'iconsax-react'
import React from 'react'
import { Product } from '@/types/product.types'
import Image from 'next/image'
import Cart from './Cart'
import { PRIMARY_COLOR } from '@/config/const'

interface ShopInformationProps {
    product: Product
}

const ShopInformation = ({ product }: ShopInformationProps) => {

    const defaultVariant = product.default_variant
    const shop = defaultVariant.shop
    const price = defaultVariant.price
    const warranty = defaultVariant.warranty
    const postingTime = defaultVariant.postingTime

    const formatPrice = (price: number) => {
        return price.toLocaleString('fa-IR')
    }

    const discountPercent = price.discount_percent
    const hasDiscount = discountPercent > 0

    return (
        <div className='w-full xl:w-[325px] bg-[#FAFAFA] rounded-[10px] p-4 sm:p-6 lg:p-7 border border-border h-fit xl:sticky xl:top-[170px] xl: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 flex items-center justify-center overflow-hidden'>
                    <Image
                        src={shop.logo}
                        alt={shop.shopName}
                        width={28}
                        height={28}
                        className='w-full h-full object-cover'
                    />
                </div>
                <div>
                    <div className='text-[#333333] text-sm'>{shop.shopName}</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'>
                <Image
                    src={warranty.logoUrl}
                    alt={warranty.name}
                    width={20}
                    height={20}
                />
                <div>{warranty.name}</div>
                <Separator orientation='vertical' style={{ height: 20 }} />
                <div>{warranty.duration}</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={PRIMARY_COLOR} />
                    <div className='text-[#999999]'>ارسال از {shop.shopName} حداکثر پس از {postingTime} روز کاری</div>
                </div>
            </div>

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

            {hasDiscount && (
                <div className='mt-4 text-sm text-[#999999] font-light flex justify-between'>
                    <div>قیمت برای شما</div>
                    <div className='line-through text-base'>{formatPrice(price.retailPrice)}</div>
                </div>
            )}

            <div className='mt-3 flex justify-between items-center'>
                {hasDiscount && (
                    <div className='h-6 text-xs px-3 bg-primary rounded-full text-white w-fit flex items-center justify-center'>
                        {discountPercent}%
                    </div>
                )}
                <div>
                    <span className='text-lg'>{formatPrice(price.selling_price)}</span> <span className='text-xs'>تومان</span>
                </div>
            </div>

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

export default ShopInformation