'use client'
import React from 'react'
import OrderButtons from './OrderButtons'
import OrderProducts from './OrderProducts'
import { Order } from '../types/Types'
import moment from 'moment-jalaali'

interface OrderItemProps {
    order: Order
    getStatusText: (status: string) => string
}

const OrderItem: React.FC<OrderItemProps> = ({ order, getStatusText }) => {
    return (
        <div className='bg-white border border-[#E0E0E0] rounded-[8px] p-3 sm:p-4 md:p-5'>
            <div className='flex flex-col lg:flex-row gap-4 sm:gap-6'>
                <div className='lg:max-w-[234px] w-full'>
                    <div className=''>
                        <div className='text-xs sm:text-sm text-[#7F7F7F] mb-1'>
                            شماره سفارش: <span className='text-black'> {order._id.toString()}</span>
                        </div>
                        <div className='text-xs sm:text-sm text-[#7F7F7F] mt-3 sm:mt-4'>
                            مبلغ: <span className='text-black'> {(order.payment?.totalPrice || 0).toLocaleString('fa-IR')} تومان</span>
                        </div>
                    </div>

                    <div className='mb-4 sm:mb-6 mt-3 sm:mt-4'>
                        <div className='text-xs sm:text-sm text-[#7F7F7F]'>
                            وضعیت سفارش : <span className='text-black'>{getStatusText(order.status || 'pending')}</span>
                        </div>
                        <div className='text-xs dltr text-right sm:text-sm text-[#7F7F7F] mt-3 sm:mt-4'>
                            تاریخ ثبت سفارش: <span className='text-black'> {moment(order.payment?.createdAt, 'jYYYY/jMM/jDD HH:mm:ss').format('jYYYY-jMM-jDD')}</span>
                        </div>
                    </div>

                    <div className='flex flex-col sm:flex-row gap-2 sm:gap-3'>
                        <OrderButtons status={order.status || 'pending'} orderId={order._id.toString()} />
                    </div>
                </div>

                <OrderProducts products={order.orderItems.flatMap(item =>
                    item.shipmentItems.map(shipmentItem => ({
                        id: shipmentItem.product._id,
                        image: shipmentItem.product.imagesUrl?.cover || '',
                        name: shipmentItem.product.title_fa
                    }))
                )} />
            </div>
        </div>
    )
}

export default OrderItem
