"use client"

import { Button as BaseButton } from "@base-ui/react/button";
import { useState } from "react"
import { m, AnimatePresence } from "motion/react"

const navItems = [
    "Overview",
    "Integrations",
    "Deployments",
    "Activity",
]

export default function Navbar() {
    const [activeItem, setActiveItem] = useState("Overview")
    const [hoveredItem, setHoveredItem] = useState<string | null>(null)

    return (
        <m.nav
            initial={{ opacity: 0, y: -8 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.4, ease: [0.23, 1, 0.32, 1] }}
            className="max-w-5xl flex justify-center items-center bg-neutral-950 rounded-2xl border-b border-neutral-800 sticky top-0 z-50 shadow-[inset_-12px_-8px_40px_#00000030]"
        >
            <div className="flex items-center h-12 px-6">
                <div className="flex items-center space-x-8">
                    {navItems.map((item) => (
                        <div
                            key={item}
                            className="relative"
                            onMouseEnter={() => setHoveredItem(item)}
                            onMouseLeave={() => setHoveredItem(null)}
                        >
                            <BaseButton
                                onClick={() => setActiveItem(item)}
                                className={`relative px-3 py-3 text-sm font-medium cursor-pointer transition-colors duration-200 ${activeItem === item
                                    ? "text-white"
                                    : hoveredItem === item
                                        ? "text-neutral-300"
                                        : "text-neutral-500"
                                    }`}
                            >
                                {item}

                                {/* Active underline */}
                                {activeItem === item && (
                                    <m.div
                                        className="absolute bottom-0 left-0 right-0 h-0.5 bg-white rounded-full"
                                        layoutId="activeUnderline"
                                        initial={false}
                                        transition={{
                                            type: "spring",
                                            stiffness: 400,
                                            damping: 28,
                                        }}
                                    />
                                )}

                                {/* Hover indicator */}
                                <AnimatePresence>
                                    {hoveredItem === item && activeItem !== item && (
                                        <m.div
                                            className="absolute bottom-0 left-0 right-0 h-0.5 bg-neutral-600 rounded-full"
                                            initial={{ scaleX: 0, opacity: 0 }}
                                            animate={{ scaleX: 1, opacity: 1 }}
                                            exit={{ scaleX: 0, opacity: 0 }}
                                            transition={{
                                                duration: 0.2,
                                                ease: [0.23, 1, 0.32, 1],
                                            }}
                                        />
                                    )}
                                </AnimatePresence>
                            </BaseButton>
                        </div>
                    ))}
                </div>
            </div>
        </m.nav>
    )
}
Animated Navbar
