import { useLocation, useNavigate } from "react-router-dom";

const tabs = [
  {
    path: "/",
    label: "CONTROL",
    icon: (
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
        <line x1="3" y1="9" x2="21" y2="9" />
        <line x1="9" y1="21" x2="9" y2="9" />
      </svg>
    ),
  },
  {
    path: "/devices",
    label: "LIBRARY",
    icon: (
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
      </svg>
    ),
  },
];

export default function BottomNav() {
  const location = useLocation();
  const navigate = useNavigate();

  return (
    <nav
      className="fixed bottom-0 left-0 right-0 z-50 flex justify-around items-center px-6 pb-8 pt-4"
      style={{
        background: "linear-gradient(to top, rgba(26, 47, 36, 0.95), rgba(26, 47, 36, 0.8))",
        backdropFilter: "blur(20px)",
        WebkitBackdropFilter: "blur(20px)",
        borderTop: "1px solid rgba(212, 175, 55, 0.15)",
      }}
    >
      {tabs.map((tab) => {
        const isActive = location.pathname === tab.path;
        return (
          <button
            key={tab.path}
            className={`flex flex-col items-center gap-1.5 transition-all duration-300 ${
              isActive ? "text-gold" : "text-cream-dark opacity-50 hover:opacity-100 hover:text-cream"
            }`}
            onClick={() => navigate(tab.path)}
          >
            <div className={`p-2 rounded-xl transition-all duration-300 ${isActive ? "bg-gold/10 shadow-[0_0_15px_rgba(212,175,55,0.2)]" : ""}`}>
              {tab.icon}
            </div>
            <span className="text-[0.6rem] font-bold tracking-[0.25em] transition-all">
              {tab.label}
            </span>
          </button>
        );
      })}
    </nav>
  );
}
