import Button from '@/components/Button'
import Input from '@/components/Input'
import Select from '@/components/Select'
import Textarea from '@/components/Textarea'
import { COLORS } from '@/constants/colors'
import { Printer, TickSquare } from 'iconsax-react'
import { type FC } from 'react'

const PrintService: FC = () => {
    return (
        <div className='mt-5'>
            {/* Header Section */}
            <div className='flex justify-between items-center'>
                <h1 className='text-lg font-light'>خدمات چاپ</h1>
                <div className='flex gap-3'>
                    <Button className='w-fit px-6 bg-transparent border border-primary text-primary'>
                        <div className='flex gap-1.5'>
                            <Printer size={18} color={COLORS.primary} />
                            <div className='text-[13px] font-light'>چاپ</div>
                        </div>
                    </Button>
                    <Button className='w-fit px-6 bg-primary'>
                        <div className='flex gap-1.5'>
                            <TickSquare size={18} color='black' />
                            <div className='text-[13px] font-light'>ذخیره خدمات</div>
                        </div>
                    </Button>
                </div>
            </div>

            <div className='mt-8 grid grid-cols-1 lg:grid-cols-12 gap-6'>
                {/* Left Sidebar */}


                {/* Right Content */}
                <div className='lg:col-span-8 space-y-6'>
                    {/* Order Details Card */}
                    <div className='bg-white p-6 rounded-3xl'>
                        <h2 className='font-light text-lg mb-6'>جزئیات سفارش</h2>

                        <div className='flex gap-4 mb-6'>
                            <Input
                                label='تیراژ'
                                name='quantity'
                                onChange={() => { }}
                                seprator
                            />
                            <Select
                                label='نوع کاغذ'
                                items={[
                                    { value: 'normal', label: 'کاغذ معمولی' },
                                    { value: 'glossy', label: 'کاغذ براق' },
                                    { value: 'matte', label: 'کاغذ مات' }
                                ]}
                            />
                            <Select
                                label='نوع روکش'
                                items={[
                                    { value: 'none', label: 'بدون روکش' },
                                    { value: 'uv', label: 'روکش UV' },
                                    { value: 'laminate', label: 'لمینت' }
                                ]}
                            />
                        </div>

                        <div className='flex gap-4 mb-6'>
                            <Input
                                label='گرماژ کاغذ'
                                name='paperWeight'
                                onChange={() => { }}
                            />
                            <Select
                                label='نوع صحافی'
                                items={[
                                    { value: 'stapled', label: 'منگنه' },
                                    { value: 'glued', label: 'چسب' },
                                    { value: 'spiral', label: 'سیمی' }
                                ]}
                            />
                            <Select
                                label='قالب ساز'
                                items={[
                                    { value: 'standard', label: 'استاندارد' },
                                    { value: 'custom', label: 'سفارشی' }
                                ]}
                            />
                        </div>

                        <div className='mb-6'>
                            <Input
                                label='لیتوگرافی'
                                name='lithography'
                                onChange={() => { }}
                            />
                        </div>

                        <Textarea
                            label='توضیحات'
                        />
                    </div>

                    {/* Designer Notes Card */}
                    <div className='bg-white p-6 rounded-3xl'>
                        <h2 className='font-light text-lg mb-6'>توضیحات طراح</h2>

                        <Input
                            label='تعداد رنگ'
                            name='colorCount'
                            onChange={() => { }}
                        />

                        <div className='flex gap-4 mt-6'>

                            <Input
                                label='اندازه سند چاپی'
                                name='printSize'
                                onChange={() => { }}
                            />
                            <Input
                                label='اندازه تیغ به تیغ'
                                name='bleedSize'
                                onChange={() => { }}
                            />

                            <Input
                                label='تعداد فرم'
                                name='formCount'
                                onChange={() => { }}
                            />
                            <Input
                                label='تعداد در فرم'
                                name='quantityPerForm'
                                onChange={() => { }}
                            />
                        </div>

                        <div className='mt-6'>
                            <Textarea
                                label='توضیحات'
                            />
                        </div>
                    </div>
                </div>

                <div className='lg:col-span-4'>
                    <div className='bg-white p-6 rounded-3xl'>
                        <div className='space-y-6'>
                            <Input
                                label='عنوان'
                                name='title'
                                onChange={() => { }}
                            />

                            <Textarea
                                label='توضیحات'
                            />

                            <Textarea
                                label='هشدارها'
                            />


                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default PrintService