'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { Home, Server, Network, BarChart3, Shield, Settings } from 'lucide-react'
import { cn } from '@/lib/utils'

const navigation = [
  { name: 'Dashboard', href: '/dashboard', icon: Home },
  { name: 'Resources', href: '/resources', icon: Server },
  { name: 'Network', href: '/network', icon: Network },
  { name: 'Dashboards', href: '/dashboards', icon: BarChart3 },
  { name: 'Well-Architected', href: '/well-architected', icon: Shield },
  { name: 'Settings', href: '/settings', icon: Settings },
]

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

  return (
    <div className="flex w-64 flex-col border-r border-studio-medium bg-studio-dark">
      <div className="flex h-16 items-center border-b border-studio-medium px-6">
        <h1 className="text-xl font-bold bg-gradient-to-r from-phoenix-fire to-sankofa-gold bg-clip-text text-transparent">
          Sankofa Phoenix
        </h1>
      </div>
      <nav className="flex-1 space-y-1 px-3 py-4">
        {navigation.map((item) => {
          const isActive = pathname?.startsWith(item.href)
          return (
            <Link
              key={item.name}
              href={item.href}
              className={cn(
                'group flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
                isActive
                  ? 'bg-studio-medium text-phoenix-fire'
                  : 'text-gray-400 hover:bg-studio-medium hover:text-foreground'
              )}
            >
              <item.icon className="h-5 w-5" />
              {item.name}
            </Link>
          )
        })}
      </nav>
    </div>
  )
}
