"use client";
import { useState } from "react";
import { motion } from "framer-motion";

const tabs = ["Discover", "Projects", "Settings", "Profile"];

export function BlobNavigation() {
  const [activeTab, setActiveTab] = useState(tabs[0]);

  return (
    <div className="flex items-center justify-center w-full h-40 bg-[#0a0a0a] rounded-xl border border-border">
      <div className="relative flex items-center p-2 rounded-full bg-[#111] border border-border">
        {tabs.map((tab) => (
          <button
            key={tab}
            onClick={() => setActiveTab(tab)}
            className="relative px-6 py-2 text-sm font-medium outline-none transition-colors duration-300 z-10"
            style={{
              color: activeTab === tab ? "#000" : "#888"
            }}
          >
            {activeTab === tab && (
              <motion.div
                layoutId="blob-nav-indicator"
                className="absolute inset-0 bg-white rounded-full -z-10"
                transition={{ type: "spring", bounce: 0.2, duration: 0.6 }}
              />
            )}
            {tab}
          </button>
        ))}
      </div>
    </div>
  );
}