import { Home, LayoutGrid, UserRound } from "lucide-react"
import { useState } from "react"


const items = [
    {
        id: "menu",
        icon: <LayoutGrid />,
        label: 'Menu'
    },
    {
        id: "home",
        icon: <Home />,
        label: "Accueil"
    },
    {
        id: "user",
        icon: <UserRound />,
        label: "Profil"
    },

]

const MobileHeader = () => {
    const [menuSelected, setMenuSelected] = useState<string>('menu')
    const [openMenu, setOpenMenu] = useState(false)
    const activeIndex = items.findIndex((item) => item.id === menuSelected);

    return (
        <div className='max-w-screen w-full grid relative grid-cols-3 self-center transition-all duration-300'>
            <div
                className="absolute -top-[50%] tablet:-top-[60%] left-0 w-1/3 flex justify-center transition-all duration-300 ease-in-out"
                style={{
                    transform: `translateX(${activeIndex * 100}%)`,
                }}
            >
                <div className="w-2/3 tablet:w-1/2 h-14 bg-(--accent) rounded-[100%]"></div>
                    
                
            </div>
            {items.map((item) => (
                <div
                    key={item.id}
                    onClick={() => setMenuSelected(item.id)}
                    className="flex flex-col items-center justify-center relative"
                >
                    <div className="text-xl">{item.icon}</div>
                    <span
                        className={`text-xs tablet:text-lg duration-300 ${menuSelected === item.id ? "text-white font-semibold" : "text-(--background)"
                            }`}
                    >
                        {item.label}
                    </span>
                </div>
            ))}
        </div>
    )
}

export default MobileHeader