'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'

const SURFACES = [
  { code: 'B', href: '/cluster', label: 'Topology' },
  { code: 'E', href: '/cluster/delivery', label: 'Delivery' },
  { code: 'C', href: '/cluster/terminal', label: 'Terminal' },
  { code: 'D', href: '/cluster/chat', label: 'Chat' },
]

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

  return (
    <nav
      aria-label="Cluster surfaces"
      className="flex shrink-0 gap-px overflow-x-auto border-b border-wire bg-void md:w-16 md:flex-col md:overflow-visible md:border-b-0 md:border-r"
    >
      {SURFACES.map((s) => {
        const active = pathname === s.href
        return (
          <Link
            key={s.href}
            href={s.href}
            aria-current={active ? 'page' : undefined}
            className={[
              'group flex flex-1 flex-row items-center gap-2 px-4 py-3 transition-colors md:flex-none md:flex-col md:gap-1 md:px-0 md:py-4',
              'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-lamp',
              active ? 'bg-deck text-lamp' : 'text-dim hover:bg-riser hover:text-chalk',
            ].join(' ')}
          >
            <span className="font-signage text-lg font-semibold leading-none">{s.code}</span>
            <span className="font-data text-[9px] uppercase tracking-[0.14em] md:[writing-mode:vertical-rl]">
              {s.label}
            </span>
          </Link>
        )
      })}
    </nav>
  )
}