import Button from '@/components/Button'
import Input from '@/components/Input'
import Select from '@/components/Select'
import DatePicker from '@/components/DatePicker'
import Textarea from '@/components/Textarea'
import CustomerStats from '@/components/CustomerStats'
import { TickCircle, Wallet2, TicketDiscount } from 'iconsax-react'
import { type FC } from 'react'

const CreateCustomer: 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'>
                    <div className='flex gap-2 items-center'>
                        <TickCircle
                            size={20}
                            color='#fff'
                        />
                        <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='text-lg font-light'>
                            اطلاعات مشتری
                        </div>

                        <div className='grid grid-cols-2 gap-4 mt-6'>
                            <Input
                                label='نام'
                                placeholder=''
                                name='name'
                            />
                            <Input
                                label='کد ملی'
                                placeholder=''
                                name='nationalCode'
                            />
                        </div>

                        <div className='grid grid-cols-2 gap-4 mt-5'>
                            <Input
                                label='شماره تماس'
                                placeholder=''
                                name='phone'
                            />
                            <Input
                                label='ایمیل'
                                placeholder=''
                                name='email'
                                type='email'
                            />
                        </div>

                        <div className='grid grid-cols-2 gap-4 mt-5'>
                            <div>
                                <DatePicker
                                    label='تاریخ تولد'
                                    placeholder='انتخاب'
                                    onChange={() => { }}
                                />
                            </div>
                            <DatePicker
                                label='تاریخ ازدواج'
                                placeholder='انتخاب'
                                onChange={() => { }}
                            />
                        </div>
                    </div>

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

                        <div className='grid grid-cols-2 gap-4 mt-6'>
                            <Select
                                label='استان'
                                placeholder='انتخاب'
                                items={[]}
                            />
                            <Select
                                label='شهر'
                                placeholder='انتخاب'
                                items={[]}
                            />
                        </div>

                        <div className='mt-5'>
                            <Input
                                label='عنوان آدرس'
                                placeholder=''
                                name='addressTitle'
                            />
                        </div>

                        <div className='mt-5'>
                            <Textarea
                                label='آدرس'
                                placeholder=''
                                name='address'
                            />
                        </div>
                    </div>
                </div>

                <div className='w-[330px]'>
                    <div className='bg-white rounded-4xl p-8'>
                        <CustomerStats points={0} walletBalance='۰ تومان' />
                        <Button className='w-full mt-5'>
                            <div className='flex gap-2 items-center'>
                                <Wallet2 size={16} color='#fff' />
                                <span>افزایش موجودی کیف پول</span>
                            </div>
                        </Button>
                    </div>

                    <div className='mt-6 bg-white rounded-4xl p-8'>
                        <div className='font-light'>
                            کدهای تخفیف
                        </div>
                        <div className='mt-4'>
                            <table className='w-full'>
                                <thead>
                                    <tr className='border-b border-border'>
                                        <th className='text-right pb-2 font-light text-xs text-description'>
                                            کد
                                        </th>
                                        <th className='text-center pb-2 font-light text-xs text-description'>
                                            انقضا
                                        </th>
                                        <th className='text-center pb-2 font-light text-xs text-description'>
                                            وضعیت
                                        </th>
                                    </tr>
                                </thead>
                            </table>
                            <div className='text-center py-8 text-xs text-description'>
                                کد تخفیفی موجود نیست
                            </div>
                            <Button className='w-full'>
                                <div className='flex gap-2 items-center'>
                                    <TicketDiscount size={16} color='#fff' />
                                    <span>اضافه کردن کد تخفیف</span>
                                </div>
                            </Button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default CreateCustomer