import Input from '@/components/Input'
import { Separator } from '@/components/ui/separator'
import { DocumentText, Home, Profile, ShoppingCart } from 'iconsax-react'
import { FC, Fragment } from 'react'
import Menu from './components/Menu'

const Header: FC = () => {
    return (
        <Fragment>
            <div className='fixed top-0 bg-white w-full z-[9998] pb-4'>
                <div className='flex items-center justify-between px-6 py-[18px]'>
                    <div className='flex gap-[30px] items-center'>
                        <div>LOGO</div>
                        <Input className='w-[500px]' variant='search' placeholder='جستجو' />
                    </div>

                    <div className='flex items-center gap-6'>
                        <div className='h-10 border border-border py-3 px-4 rounded-[12px] flex items-center gap-2.5'>
                            <Profile size={20} color='#333333' />
                            <div className='text-sm text-[#333333]'>حساب کاربری</div>
                        </div>

                        <Separator 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='mt-7 text-sm px-6 flex items-center gap-7'>
                    <Menu />
                    <Separator style={{ height: 20 }} orientation='vertical' />

                    <div className='flex items-center gap-2.5'>
                        <Home size={20} color='#333333' />
                        <div className='text-[#333333]'>صفحه نخست</div>
                    </div>
                    <div className='flex items-center gap-2.5'>
                        <DocumentText size={20} color='#333333' />
                        <div className='text-[#333333]'>مجله</div>
                    </div>
                </div>
            </div>
            <div className='h-[140px]'></div>
        </Fragment>
    )
}

export default Header