import Button from '@/components/Button'
import Input from '@/components/Input'
import Textarea from '@/components/Textarea'
import { CallCalling, Location, SmsTracking } from 'iconsax-react'
import { NextPage } from 'next'
import React from 'react'

const Contact: NextPage = () => {
    return (
        <div className='mt-24 max-w-maxWidth mx-auto'>
            <h1 className='text-2xl font-bold'>
                تماس با ما
            </h1>

            <div className='flex xl:flex-row flex-col gap-24 mt-14 items-center'>
                <div className='xl:max-w-[300px]'>
                    <div className='font-bold text-lg'>
                        شماره تماس
                    </div>
                    <div className='flex gap-4 mt-4 items-center'>
                        <CallCalling
                            size={24}
                            color='black'
                        />
                        <div className='text-sm'>
                            ۰۲۱-۲۱۲۳۲۱۲۳ | ۰۸۶-۲۱۰۰۲۰۰۱
                        </div>
                    </div>

                    <div className='font-bold text-lg mt-8'>
                        ایمیل
                    </div>
                    <div className='flex gap-4 mt-4 items-center'>
                        <SmsTracking
                            size={24}
                            color='black'
                        />
                        <div className='text-sm'>
                            info@danakcorp.com
                        </div>
                    </div>

                    <div className='font-bold text-lg mt-8'>
                        آدرس
                    </div>
                    <div className='flex gap-4 mt-4 items-center'>
                        <Location
                            size={24}
                            color='black'
                        />
                        <div className='text-sm'>
                            یوسف آباد، فتجی شقایق، پلاک ۵ ،  واحد ۱۳
                        </div>
                    </div>
                </div>

                <div className='flex-1 w-full  bg-[#F1F3F8] rounded-4xl xl:p-10 p-5 border-2 border-white'>
                    <div className='text-lg font-bold'>
                        فرم تماس
                    </div>

                    <div className='rowTwoInput mt-8'>
                        <Input
                            placeholder='نام و نام خانوادگی'
                        />
                        <Input
                            placeholder='نام شرکت '
                        />
                    </div>
                    <div className='rowTwoInput mt-8'>
                        <Input
                            placeholder='شماره تماس'
                        />
                        <Input
                            placeholder='ایمیل'
                        />
                    </div>

                    <div className='mt-8'>
                        <Textarea
                            label='پیام'
                        />
                    </div>

                    <div className='mt-8 flex justify-end'>
                        <Button
                            label='ارسال'
                            className='w-fit px-8'
                        />
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Contact