import { FavIcon } from '@/assets/svgs/Icons'
import { HomeIcon } from '@/assets/svgs/TraderIcons'
import LocalePath from '@/components/UiComponents/LocalePath'
import { useTranslations } from 'next-intl'
import HeaderCart from './HeaderCart'
import AuthWrapper from '../AuthWrapper'
import { UserIcon } from 'lucide-react'
import ProfileBtn from '../btns/ProfileBtn'
import { useSelector } from 'react-redux'
import { RootState } from '@/store/store'



const MobileTabs = ()  => {
    const t = useTranslations();
    const profile = useSelector((state:RootState)=>state.ProfileConfig)
    return (
        <div 
            className='bg-white text-gray-200 font-semibold text-sm  w-full 
            shadow-[0px_-9px_24px_0px_#CECEF129] z-[999] fixed bottom-0 p-6 flex items-center justify-between gap-2 lg:hidden '
        >
            <LocalePath href="/" className='mobile-tab'>
                <HomeIcon className="size-6 *:stroke-gray-200 home-icon" />
                <span>{t("NAV.home")}</span>  
            </LocalePath>
            <HeaderCart isTab/>
            <LocalePath href="/favorites"  className='mobile-tab'>
                <FavIcon className="size-6 *:stroke-gray-200" />
                <span>{t("NAV.favorites")}</span>  
            </LocalePath>
            <ProfileBtn isTab profile={profile}/> 
            <AuthWrapper isAuthed>
                <LocalePath href="/account/profile" className='mobile-tab' >
                    <UserIcon />
                    <span>{t("NAV.myAccount")}</span>  
                </LocalePath>
            </AuthWrapper>
        </div>
    )
}

export default MobileTabs