'use client'
import React from 'react'
import { Button } from '@/components/ui/button'
import TrackCode from './TrackCode'
import { Payment, User, ShipmentAddress } from '../../types/Types'
import { useRouter } from 'next/navigation'

interface OrderSidebarProps {
    orderData: {
        payment: Payment
        order: {
            _id: string
            user: User
            shipmentAddress: ShipmentAddress
            createdAt: string
        }
    }
    orderId: number
}

const OrderSidebar: React.FC<OrderSidebarProps> = ({ orderData, orderId }) => {
    const router = useRouter()
    return (
        <div className='lg:w-[280px] w-full p-5 rounded-2xl shadow-lg'>
            <div className='flex items-center gap-2'>
                <div className='text-[#7F7F7F]'>شناسه تراکنش :</div>
                <div className="font-mono">
                    {orderData.payment.transaction_id}
                </div>
            </div>

            <div className='flex items-center gap-2 mt-4'>
                <div className='text-[#7F7F7F]'>گیرنده :</div>
                <div>
                    {orderData.order.user.fullName}
                </div>
            </div>

            <div className='flex items-center gap-2 mt-4'>
                <div className='text-[#7F7F7F]'>کدپستی :</div>
                <div>
                    {orderData.order.shipmentAddress.postalCode}
                </div>
            </div>

            <div className='flex items-center gap-2 mt-4'>
                <div className='text-[#7F7F7F] whitespace-nowrap'>تاریخ ثبت سفارش :</div>
                <div>
                    {orderData.order.createdAt}
                </div>
            </div>

            <div className='flex items-center gap-2 mt-4'>
                <div className='text-[#7F7F7F]'>شماره موبایل :</div>
                <div>
                    {orderData.order.shipmentAddress.phone}
                </div>
            </div>

            <div className='flex items-start gap-2 mt-4'>
                <div className='text-[#7F7F7F] whitespace-nowrap'>آدرس :</div>
                <div>
                    {orderData.order.shipmentAddress.address}
                </div>
            </div>

            <TrackCode orderId={orderId} />

            <Button
                className='mt-3 w-full'
                variant="outline"
                onClick={() => router.push(`/profile/orders/${orderId}/invoice`)}
            >
                مشاهده فاکتور
            </Button>
        </div>
    )
}

export default OrderSidebar
