'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { clsx } from 'clsx'
import { LayoutDashboard, Users, Newspaper, Calendar, GraduationCap, Settings } from 'lucide-react'

const navItems = [
  { href: '/dashboard', label: 'Übersicht', icon: LayoutDashboard },
  { href: '/dashboard/mitglieder', label: 'Mitglieder', icon: Users },
  { href: '/dashboard/news', label: 'News', icon: Newspaper },
  { href: '/dashboard/termine', label: 'Termine', icon: Calendar },
  { href: '/dashboard/stellen', label: 'Lehrlingsbörse', icon: GraduationCap },
  { href: '/dashboard/einstellungen', label: 'Einstellungen', icon: Settings },
]

export function Sidebar() {
  const pathname = usePathname()

  return (
    <aside className="w-64 bg-white border-r flex flex-col flex-shrink-0">
      {/* Logo */}
      <div className="px-6 py-5 border-b">
        <Link href="/dashboard">
          <span
            className="text-xl font-bold text-gray-900 tracking-tight"
            style={{ fontFamily: "'Syne', system-ui, sans-serif" }}
          >
            Innungs<span className="text-brand-500">App</span>
          </span>
        </Link>
      </div>

      {/* Navigation */}
      <nav className="flex-1 p-3 space-y-0.5">
        {navItems.map((item) => {
          const isActive =
            item.href === '/dashboard'
              ? pathname === '/dashboard'
              : pathname.startsWith(item.href)
          const Icon = item.icon

          return (
            <Link
              key={item.href}
              href={item.href}
              className={clsx('sidebar-link', isActive && 'sidebar-link-active')}
            >
              <Icon size={16} className="flex-shrink-0" />
              <span>{item.label}</span>
            </Link>
          )
        })}
      </nav>
    </aside>
  )
}