import { useLocation } from 'react-router-dom'
import { Circle } from 'lucide-react'

const routeTitles: Record<string, string> = {
  '/': 'Dashboard',
  '/code': 'Code Context',
  '/docs': 'Documentation',
  '/otel': 'Observability',
  '/mcp': 'MCP Console',
}

export default function TopBar() {
  const location = useLocation()

  const title =
    routeTitles[location.pathname] ??
    (location.pathname.startsWith('/otel/traces/')
      ? 'Trace Detail'
      : 'ossCtx')

  return (
    <header className="flex h-14 shrink-0 items-center justify-between border-b border-border bg-surface px-6">
      <h1 className="text-lg font-semibold text-text-primary">{title}</h1>
      <div className="flex items-center gap-2 rounded-full border border-border px-3 py-1 text-xs text-text-secondary">
        <Circle className="h-2 w-2 fill-accent-green text-accent-green" />
        <span>Healthy</span>
      </div>
    </header>
  )
}
