'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { Home, Heart, Settings } from 'lucide-react'

const navItems = [
  { href: '/', icon: Home, label: 'Home' },
  { href: '/interests', icon: Heart, label: 'Interests' },
  { href: '/settings', icon: Settings, label: 'Settings' },
]

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

  return (
    <aside className="w-16 bg-sidebar border-r border-sidebar-border flex flex-col items-center py-4 gap-2">
      {navItems.map((item) => {
        const Icon = item.icon
        const isActive = pathname === item.href || pathname.startsWith(item.href + '/')
        
        return (
          <Link
            key={item.href}
            href={item.href}
            className={`
              w-12 h-12 flex items-center justify-center transition-colors relative
              ${isActive 
                ? 'bg-sidebar-primary text-sidebar-primary-foreground' 
                : 'text-sidebar-foreground hover:bg-secondary'
              }
            `}
            title={item.label}
          >
            {isActive && (
              <div className="absolute left-0 top-0 bottom-0 w-1 bg-primary" />
            )}
            <Icon size={24} />
          </Link>
        )
      })}
    </aside>
  )
}