'use client'
import { FC, Fragment } from 'react'
import Image from 'next/image'
import Link from 'next/link'
import { HambergerMenu, Profile, SearchNormal } from 'iconsax-react'
import Button from '@/components/Button'
import { useSharedStore } from '@/shared/store/sharedStore'

const Header: FC = () => {
    const { openSidebar, setOpenSidebar } = useSharedStore()
    return (
        <Fragment>
            <div className='w-full h-[100px] bg-white/26 rounded-4xl border-[3px] border-white px-10 xl:block hidden'>
                <div className='flex items-center justify-between h-full'>
                    <Image src='/images/logo.svg' alt='logo' width={150} height={40} />

                    <ul className='flex items-center gap-8 text-sm'>
                        <Link href='/'>
                            <li>
                                خانه
                            </li>
                        </Link>

                        <Link href='/products'>
                            <li>
                                محصولات
                            </li>
                        </Link>

                        <Link href='/danak-services'>
                            <li>
                                خدمات
                            </li>
                        </Link>

                        <Link href='/about'>
                            <li>
                                درباره ی ما
                            </li>
                        </Link>

                        <Link href='/blogs'>
                            <li>
                                مجله
                            </li>
                        </Link>
                    </ul>

                    <div className='flex  items-center gap-4 text-sm'>
                        <div className='border-l-2 border-[#D8DCE4] pl-4'>
                            <SearchNormal
                                size={20}
                                color='black'
                            />
                        </div>

                        <a href='https://console.danakcorp.com/auth/login' target='_blank' className='border-l-2 whitespace-nowrap border-[#D8DCE4] pl-4 flex gap-2'>
                            <Profile
                                size={20}
                                color='black'
                            />
                            <div>ورود | ثبت نام</div>
                        </a>

                        <Link href='/contact'>
                            <Button
                                label='تماس با ما'
                                className='w-fit px-8'
                            />
                        </Link>
                    </div>
                </div>

            </div>

            <div className='h-[51px] bg-white/26 rounded-4xl border-[3px] border-white px-4 xl:hidden flex items-center justify-between'>
                <div className='flex-1'>
                    <HambergerMenu
                        onClick={() => setOpenSidebar(!openSidebar)}
                        size={24}
                        color='black'
                    />
                </div>

                <Image src='/images/logo.svg' alt='logo' width={73} height={24} />

                <div className='flex gap-2 items-center flex-1 justify-end'>
                    <SearchNormal
                        size={16}
                        color='black'
                    />

                    <Profile
                        size={16}
                        color='black'
                    />
                </div>
            </div>
        </Fragment>
    )
}

export default Header