import Button from '@/components/Button'
import CustomerStats from '@/components/CustomerStats'
import AddressesTable from './components/AddressesTable'
import TransactionsTable from './components/TransactionsTable'
import PointsLogTable from './components/PointsLogTable'
import DiscountCodesTable from './components/DiscountCodesTable'
import { Edit, TaskSquare } from 'iconsax-react'
import { type FC } from 'react'

const CustomerDetails: FC = () => {
    return (
        <div className='mt-5'>
            <div className='flex justify-between items-center'>
                <h1 className='text-lg font-light'>مشتری: مهرداد مظفری</h1>
                <Button className='w-fit px-6 bg-transparent text-primary border-primary border'>
                    <div className='flex gap-2 items-center'>
                        <TaskSquare color='#000' size={20} />
                        <span>سفارشات</span>
                    </div>
                </Button>
            </div>

            <div className='flex gap-7 mt-9'>
                <div className='flex-1'>
                    <div className='w-full bg-white rounded-4xl p-8'>
                        <div className='flex justify-between items-center'>
                            <div className='text-lg font-light'>
                                اطلاعات مشتری
                            </div>
                            <div className='flex gap-1 text-[#0047FF]'>
                                <Edit size={18} color='#0047FF' />
                                <div className='text-xs'>ویرایش</div>
                            </div>
                        </div>

                        <div className='mt-8 flex flex-wrap gap-y-7 gap-20 text-[13px] font-light border-b border-dashed border-border pb-8'>
                            <div className='flex gap-2'>
                                <div className='text-description'>
                                    نام و نام خانوادگی :
                                </div>
                                <div>مهرداد مظفری</div>
                            </div>

                            <div className='flex gap-2'>
                                <div className='text-description'>
                                    کدملی :
                                </div>
                                <div>۰۵۲۱۲۳۴۵۶۷</div>
                            </div>

                            <div className='flex gap-2'>
                                <div className='text-description'>شغل:</div>
                                <div>برنامه نویس</div>
                            </div>

                            <div className='flex gap-2'>
                                <div className='text-description'>تاریخ تولد :</div>
                                <div>۱۳۶۹/۰۵/۱۱</div>
                            </div>
                        </div>

                        <div className='mt-8 flex gap-20 text-[13px] font-light'>
                            <div className='flex gap-2'>
                                <div className='text-description'>شماره تماس:</div>
                                <div>۰۸۶۹۱۰۰۹۱۰۰۱</div>
                            </div>

                            <div className='flex gap-2'>
                                <div className='text-description'>ایمیل:</div>
                                <div>info@example.com</div>
                            </div>
                        </div>
                    </div>

                    <div className='w-full bg-white rounded-4xl p-8 mt-8'>
                        <div className='text-lg font-light'>
                            آدرس ها
                        </div>
                        <AddressesTable />
                    </div>

                    <div className='w-full bg-white rounded-4xl p-8 mt-8'>
                        <div className='text-lg font-light'>
                            تراکنش ها
                        </div>
                        <TransactionsTable />
                    </div>

                    <div className='w-full bg-white rounded-4xl p-8 mt-8'>
                        <div className='text-lg font-light'>
                            لاگ امتیازها
                        </div>
                        <PointsLogTable />
                    </div>

                </div>
                <div className='w-[330px]'>
                    <CustomerStats />

                    <div className='mt-6 bg-white rounded-4xl p-8'>
                        <div className='font-light'>
                            کد تخفیف
                        </div>
                        <DiscountCodesTable />
                    </div>
                </div>
            </div>

        </div>
    )
}

export default CustomerDetails