shop-front/src/share/Header.tsx

'use client'
import Input from '@/components/Input'
import { Separator } from '@/components/ui/separator'
import { DocumentText, Home, Profile, ShoppingCart, HambergerMenu } from 'iconsax-react'
import { FC, Fragment, useEffect, useState } from 'react'
import Menu from './components/Menu'
import { useSharedStore } from './store/sharedStore'
import { getToken } from '@/config/func'
import { useGetProfile } from '@/app/profile/hooks/useProfileData'

const Header: FC = () => {

    const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
    const { setIsLogin } = useSharedStore()
    const { data: profile } = useGetProfile()

    const handleSetIsLogin = async () => {
        const token = await getToken()
        setIsLogin(token ? true : false)
    }

    useEffect(() => {
        handleSetIsLogin()
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [])

    return (
        <Fragment>
            <div className='fixed top-0 bg-white w-full z-[9998] border-b border-gray-100 max-w-full'>
                {/* بخش بالایی هدر */}
                <div className='flex items-center justify-between px-3 sm:px-4 md:px-6 py-3 sm:py-4'>
                    {/* منوی همبرگری موبایل */}
                    <div className='md:hidden'>
                        <button
                            onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
                            className='p-2 rounded-lg hover:bg-gray-50'
                        >
                            <HambergerMenu size={24} color='#333333' />
                        </button>
                    </div>

                    <div className='flex gap-2 sm:gap-4 md:gap-[30px] items-center flex-1 md:flex-none'>
                        <div className='text-base sm:text-lg font-bold text-purple-600'>LOGO</div>
                        <Input
                            className='hidden md:block w-[300px] lg:w-[500px]'
                            variant='search'
                            placeholder='جستجو'
                        />
                    </div>

                    <div className='flex items-center gap-1 sm:gap-2 md:gap-6'>
                        <div className='hidden md:flex h-10 border border-border py-3 px-4 rounded-[12px] items-center gap-2.5'>
                            <Profile size={20} color='#333333' />
                            {
                                <div className='text-sm text-[#333333]'>{profile?.results?.info?.fullName ? profile?.results?.info?.fullName : 'حساب کاربری'}</div>
                            }
                        </div>

                        <div className='md:hidden'>
                            <Profile size={24} color='#333333' />
                        </div>

                        <Separator className='hidden md:block' style={{ height: 25 }} orientation='vertical' />

                        <div className='h-10 p-3 rounded-[12px] border border-border flex items-center gap-2.5'>
                            <ShoppingCart size={20} color='#333333' />
                        </div>
                    </div>
                </div>

                {/* نوار جستجو موبایل */}
                <div className='md:hidden px-3 sm:px-4 pb-3 sm:pb-4'>
                    <Input
                        className='w-full'
                        variant='search'
                        placeholder='جستجو'
                    />
                </div>

                {/* بخش پایینی هدر - فقط دسکتاپ */}
                <div className='hidden md:flex mt-2 text-sm px-6 pb-4 items-center gap-7'>
                    <Menu />
                    <Separator style={{ height: 20 }} orientation='vertical' />

                    <div className='flex items-center gap-2.5 cursor-pointer hover:text-purple-600 transition-colors'>
                        <Home size={20} color='#333333' />
                        <div className='text-[#333333]'>صفحه نخست</div>
                    </div>
                    <div className='flex items-center gap-2.5 cursor-pointer hover:text-purple-600 transition-colors'>
                        <DocumentText size={20} color='#333333' />
                        <div className='text-[#333333]'>مجله</div>
                    </div>
                </div>

                {/* منوی موبایل */}
                {isMobileMenuOpen && (
                    <div className='md:hidden bg-white border-t border-gray-100'>
                        <div className='px-4 py-4 space-y-4'>
                            <div className='flex items-center gap-3 py-3 border-b border-gray-100'>
                                <Profile size={20} color='#333333' />
                                <span className='text-sm text-gray-800'>حساب کاربری</span>
                            </div>

                            <div className='space-y-3'>
                                <div className='flex items-center gap-3 py-2 cursor-pointer hover:bg-gray-50 rounded-lg px-2'>
                                    <Home size={20} color='#333333' />
                                    <span className='text-sm text-gray-800'>صفحه نخست</span>
                                </div>
                                <div className='flex items-center gap-3 py-2 cursor-pointer hover:bg-gray-50 rounded-lg px-2'>
                                    <DocumentText size={20} color='#333333' />
                                    <span className='text-sm text-gray-800'>مجله</span>
                                </div>
                            </div>

                            <div className='pt-4 border-t border-gray-100'>
                                <Menu />
                            </div>
                        </div>
                    </div>
                )}
            </div>

            {/* فضای خالی برای جبران ارتفاع fixed header */}
            <div className={`${isMobileMenuOpen ? 'h-[280px] sm:h-[260px] md:h-[120px]' : 'h-[120px] sm:h-[120px] md:h-[120px]'}`}></div>
        </Fragment>
    )
}

export default Header