import { FC } from 'react'
import Input from '../components/Input'
import { ArrowDown2, Element3, Notification, Wallet } from 'iconsax-react'
import AvatarImage from '../assets/images/Avatar.png'
import { useTranslation } from 'react-i18next'

const Header: FC = () => {

    const { t } = useTranslation('global')

    return (
        <div className='fixed left-4 right-[285px] top-4 h-16 flex items-center px-6 bg-white justify-between rounded-[32px] w-[calc(100%-305px)]'>

            <div className='min-w-[270px]'>
                <Input
                    variant='search'
                    placeholder={t('header.search')}
                />
            </div>
            <div className='flex gap-6 items-center'>
                <Element3 size={18} color='black' />
                <Wallet size={18} color='black' />
                <Notification size={18} color='black' />
                <div className='flex gap-2 items-center'>
                    <div className='size-7 rounded-full bg-description overflow-hidden'>
                        <img src={AvatarImage} className='size-full object-cover' />
                    </div>
                    <div className='flex gap-1 items-center'>
                        <div className='text-xs'>مهرداد مظفری</div>
                        <ArrowDown2 size={14} color='#8C90A3' />
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Header