'use client'

import { useRouter, usePathname } from 'next/navigation'
import { Suspense } from 'react'

const TABS = [
  { key: 'overview', label: 'Overview' },
  { key: 'trends', label: 'Trends' },
  { key: 'zones', label: 'Zones & Types' },
  { key: 'ai', label: 'AI Insights' },
]

function TabsInner({ activeTab }: { activeTab: string }) {
  const router = useRouter()
  const pathname = usePathname()

  return (
    <div className="flex border-b border-gray-200 mb-6 overflow-x-auto -mx-4 px-4">
      {TABS.map(tab => (
        <button
          key={tab.key}
          onClick={() => router.replace(`${pathname}?tab=${tab.key}`)}
          className={`px-4 py-2.5 text-sm font-medium whitespace-nowrap border-b-2 transition-colors ${
            activeTab === tab.key
              ? 'border-blue-600 text-blue-600'
              : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
          }`}
        >
          {tab.label}
        </button>
      ))}
    </div>
  )
}

export function DashboardTabs({ activeTab }: { activeTab: string }) {
  return (
    <Suspense fallback={<div className="h-11 mb-6 border-b border-gray-200" />}>
      <TabsInner activeTab={activeTab} />
    </Suspense>
  )
}