'use client'

import { useAppStore } from '@/store'
import { cn } from '@/lib/utils'

const TABS = [
  { id: 'dashboard', label: '📊 Dashboard' },
  { id: 'workspace', label: '🏢 Workspace' },
  { id: 'projects',  label: '📁 Proyek & Tim' },
  { id: 'kanban',    label: '✅ Kanban Board' },
  { id: 'calendar',  label: '📅 Kalender' },
]

export function TabBar() {
  const { activeTab, setActiveTab } = useAppStore()

  return (
    <div className="flex items-center bg-white border-b border-gray-150 px-6 overflow-x-auto scrollbar-none flex-shrink-0">
      {TABS.map(tab => (
        <button
          key={tab.id}
          onClick={() => setActiveTab(tab.id)}
          className={cn(
            'px-4 py-3.5 text-sm font-medium whitespace-nowrap border-b-2 transition-all',
            activeTab === tab.id
              ? 'border-gold-500 text-gray-900'
              : 'border-transparent text-gray-500 hover:text-gray-900 hover:border-gray-300'
          )}
          style={activeTab === tab.id ? { borderBottomColor: '#F5C542' } : {}}
        >
          {tab.label}
        </button>
      ))}
    </div>
  )
}