interactives/src/components/Navigation.tsx

import { Link, useLocation } from "react-router-dom";
import { BookOpen } from "lucide-react";
import { cn } from "@/lib/utils";

const Navigation = () => {
  const location = useLocation();
  
  const navItems = [
    { name: "Index", path: "/index" },
    { name: "Themes", path: "/themes" },
    { name: "About", path: "/about" }
  ];

  return (
    <nav className="bg-surface border-b border-outline">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex items-center justify-between h-16">
          <Link 
            to="/" 
            className="flex items-center gap-3 text-xl font-bold text-foreground hover:text-accent transition-colors"
          >
            <div className="w-8 h-8 bg-accent rounded-lg flex items-center justify-center transform rotate-3">
              <BookOpen className="w-5 h-5 text-accent-foreground" />
            </div>
            Interactives
          </Link>
          
          <div className="flex space-x-8">
            {navItems.map((item) => {
              const isActive = location.pathname === item.path;
              return (
                <Link
                  key={item.name}
                  to={item.path}
                  className={cn(
                    "px-3 py-2 text-sm font-medium transition-colors relative",
                    isActive 
                      ? "text-accent" 
                      : "text-foreground hover:text-accent"
                  )}
                >
                  {item.name}
                  {isActive && (
                    <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-accent" />
                  )}
                </Link>
              );
            })}
          </div>
        </div>
      </div>
    </nav>
  );
};

export default Navigation;