import { Button } from '@/components/ui/button'
import { Separator } from '@/components/ui/separator'
import { Call, Instagram, Location, Sms } from 'iconsax-react'
import Image from 'next/image'
import { FC } from 'react'

const Footer: FC = () => {
    return (
        <div className='mt-24 bg-[#F5F5F5] p-20 flex gap-20'>
            <div className='bg-[#F2F2F2] max-w-[450px] p-7 rounded-2xl border border-border'>
                <div>LOGO</div>
                <div className='mt-6 text-sm text-[#383E43] '>
                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده
                </div>

                <div className='mt-20 text-[#383E43] text-sm'>
                    <div className='flex gap-3'>
                        <Call color='#383E43' size={20} />
                        <div>تلفن: 67341</div>
                    </div>

                    <div className='flex gap-3 mt-4'>
                        <Sms color='#383E43' size={20} />
                        <div>کدپستی: 1136834843</div>
                    </div>
                    <div className='flex gap-3 mt-4'>
                        <Location color='#383E43' size={20} className='min-w-5' />
                        <div className='leading-5'>
                            تهران، میدان امام خمینی، خیابان فردوسی، خیابان سرهنگ سخائی
                            نبش کوچه بهنیا، پلاک40، طبقه چهارم، واحد12
                        </div>
                    </div>

                </div>

                <div className='mt-14 flex justify-end'>
                    <div className='size-10 bg-amber-200'></div>
                </div>
            </div>
            <div className='flex-1'>
                <div className='w-full rounded-xl bg-[#F2F2F2] border border-border h-[72px] flex items-center justify-between px-6'>
                    <div className='text-[#383E43]'>
                        دانلود اپلیکیشن
                    </div>
                    <div className='flex gap-2'>
                        <Image
                            width={132}
                            height={48}
                            alt='download from app store'
                            src='/images/appstore.png'
                        />
                        <Image
                            width={142}
                            height={48}
                            alt='download from google play'
                            src='/images/googleplay.png'
                        />
                    </div>
                </div>

                <div className='w-full rounded-xl bg-[#F2F2F2] border border-border h-[72px] flex items-center justify-between px-6 mt-6'>
                    <div className='text-[#383E43]'>
                        با ثبت ایمیل از آخرین تخفیف ها با خبر شوید
                    </div>
                    <div className='flex gap-2'>
                        <div className='bg-[#E5E5E5] h-12 flex gap-3 items-center px-3 rounded-[8px]'>
                            <Sms size={20} color='#383E43' />
                            <Separator className='bg-[#C9C9C9]' style={{ height: 15 }} orientation='vertical' />
                            <input placeholder='آدرس ایمیل' className='bg-transparent outline-none text-sm' />
                        </div>
                        <Button className='h-12 w-[72px]'>
                            ثبت
                        </Button>
                    </div>
                </div>

                <div className='w-full rounded-xl bg-[#F2F2F2] border border-border h-[72px] flex items-center justify-between px-6 mt-6'>
                    <div className='text-[#383E43]'>
                        ما را در شبکه های اجتماعی دنبال کنید
                    </div>

                    <div className='flex gap-1.5'>
                        <div className='size-10 bg-[#878787] hover:bg-primary rounded-full flex justify-center items-center'>
                            <Instagram size={20} color='#fff' />
                        </div>
                        <div className='size-10 bg-[#878787] hover:bg-primary rounded-full flex justify-center items-center'>
                            <Instagram size={20} color='#fff' />
                        </div>
                        <div className='size-10 bg-[#878787] hover:bg-primary rounded-full flex justify-center items-center'>
                            <Instagram size={20} color='#fff' />
                        </div>
                    </div>
                </div>

                <div className='mt-20 flex justify-between'>
                    <div>
                        <div>همراه با سندس کالا</div>
                        <ul className='flex mt-6 flex-col gap-4 font-light'>
                            <li className='text-[#878787]'>تماس با ما</li>
                            <li className='text-[#878787]'>درباره سندس کالا</li>
                            <li className='text-[#878787]'>فروش در سندس کالا</li>
                        </ul>
                    </div>
                    <div>
                        <div>راهنمای خرید از سندس کالا</div>
                        <ul className='flex mt-6 flex-col gap-4 font-light'>
                            <li className='text-[#878787]'>نحوه ثبت سفارش</li>
                            <li className='text-[#878787]'>قوانین مرجوعی کالا</li>
                            <li className='text-[#878787]'>پاسخ به پرسش ها متداول</li>
                        </ul>
                    </div>
                    <div>
                        <div>خدمات مشتریان</div>
                        <ul className='flex mt-6 flex-col gap-4 font-light'>
                            <li className='text-[#878787]'>حساب کاربری من</li>
                            <li className='text-[#878787]'>سبد خرید</li>
                            <li className='text-[#878787]'>حریم حصوصی</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Footer