'use client'

import React from 'react'

export type TabId = 'overview' | 'new_reports' | 'investigation' | 'closed' | 'settings'

export interface Tab {
  id: TabId
  label: string
  count?: number
  countColor?: string
}

export function TabNavigation({
  tabs,
  activeTab,
  onTabChange
}: {
  tabs: Tab[]
  activeTab: TabId
  onTabChange: (tab: TabId) => void
}) {
  return (
    <div className="border-b border-gray-200">
      <nav className="flex gap-1 -mb-px" aria-label="Tabs">
        {tabs.map(tab => (
          <button
            key={tab.id}
            onClick={() => onTabChange(tab.id)}
            className={`
              px-4 py-3 text-sm font-medium border-b-2 transition-colors
              ${activeTab === tab.id
                ? 'border-purple-600 text-purple-600'
                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
              }
            `}
          >
            <span className="flex items-center gap-2">
              {tab.label}
              {tab.count !== undefined && tab.count > 0 && (
                <span className={`
                  px-2 py-0.5 text-xs rounded-full
                  ${tab.countColor || 'bg-gray-100 text-gray-600'}
                `}>
                  {tab.count}
                </span>
              )}
            </span>
          </button>
        ))}
      </nav>
    </div>
  )
}