"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { LayoutDashboard, Settings, Image as ImageIcon, Compass, CalendarDays, Star, Info } from "lucide-react";

export default function SidebarNav() {
  const pathname = usePathname();

  const navLinks = [
    { name: "Gösterge Paneli", href: "/admin", icon: LayoutDashboard },
    { name: "Site Ayarları", href: "/admin/settings", icon: Settings },
    { name: "Hero Bölümü", href: "/admin/hero", icon: ImageIcon },
    { name: "Hakkımızda", href: "/admin/about", icon: Info },
    { name: "Özellikler", href: "/admin/features", icon: Star },
    { name: "Aktiviteler", href: "/admin/activities", icon: Compass },
    { name: "Etkinlikler", href: "/admin/events", icon: CalendarDays },
  ];

  return (
    <nav className="flex-1 px-4 py-6 space-y-2 overflow-y-auto">
      {navLinks.map((link) => {
        const isActive = pathname === link.href || (link.href !== "/admin" && pathname?.startsWith(link.href));
        const Icon = link.icon;
        
        return (
          <Link
            key={link.name}
            href={link.href}
            className={`flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-300 relative group ${
              isActive 
                ? "bg-white/10 text-white shadow-lg backdrop-blur-md" 
                : "text-white/60 hover:bg-white/5 hover:text-white"
            }`}
          >
            {isActive && (
              <div className="absolute left-0 top-1/2 -translate-y-1/2 w-1.5 h-8 bg-accent rounded-r-full shadow-[0_0_10px_rgba(var(--accent),0.5)]" />
            )}
            <Icon className={`w-5 h-5 transition-transform duration-300 ${isActive ? "scale-110" : "group-hover:scale-110"}`} />
            <span className="font-medium text-sm tracking-wide">{link.name}</span>
          </Link>
        );
      })}
    </nav>
  );
}