import { FC } from 'react'
import Input from '../components/Input'
import { ArrowDown2, Element3, HambergerMenu, Wallet } from 'iconsax-react'
import AvatarImage from '../assets/images/Avatar.png'
import { useTranslation } from 'react-i18next'
import { Link, useParams } from 'react-router-dom'
import { Pages } from '../config/Pages'
import Notifications from '../pages/notification/Notification'
import { useSharedStore } from './store/sharedStore'

const Header: FC = () => {

    const { t } = useTranslation('global')
    const { setOpenSidebar, openSidebar } = useSharedStore()
    const { slug } = useParams()

    return (
        <div className='fixed z-10 right-4 left-4 xl:right-[285px] top-4 xl:h-16 h-12 flex items-center px-6 bg-white justify-between rounded-[32px] xl:w-[calc(100%-305px)]'>
            <div className='min-w-[270px] hidden xl:block'>
                <Input
                    variant='search'
                    placeholder={t('header.search')}
                />
            </div>
            <div onClick={() => setOpenSidebar(!openSidebar)} className='xl:hidden block'>
                <HambergerMenu size={24} color='black' />
            </div>
            {/* <img src={LogoImage} className='h-6 xl:hidden block absolute right-0 left-0 mx-auto' /> */}
            <div className='flex xl:gap-6 gap-3 items-center'>
                <Element3 color='black' className='xl:size-[18px] size-4' />
                <Link to={`/${slug}/${Pages.wallet}`}>
                    <Wallet className='xl:size-[18px] size-4' color='black' />
                </Link>
                <Notifications />
                <div className='flex gap-2 items-center'>
                    <div className='size-7 rounded-full bg-description overflow-hidden'>
                        <Link to={`/${slug}/${Pages.profile}`}>
                            <img src={AvatarImage} className='size-full object-cover' />
                        </Link>
                    </div>
                    <div className='xl:flex hidden gap-1 items-center'>
                        <div className='text-xs'>مهرداد مظفری</div>
                        <ArrowDown2 size={14} color='#8C90A3' />
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Header