'use client'

import { TabId } from '../_types'

interface TabNavProps {
  activeTab: TabId
  onTabChange: (tab: TabId) => void
  logsTotal: number
}

const TABS: { id: TabId; label: string }[] = [
  { id: 'templates', label: 'Templates' },
  { id: 'editor', label: 'Editor' },
  { id: 'settings', label: 'Einstellungen' },
  { id: 'logs', label: 'Logs' },
]

export function TabNav({ activeTab, onTabChange, logsTotal }: TabNavProps) {
  return (
    <div className="border-b border-gray-200">
      <nav className="flex gap-1 -mb-px">
        {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'
            }`}
          >
            {tab.label}
            {tab.id === 'logs' && logsTotal > 0 && (
              <span className="ml-1.5 px-1.5 py-0.5 text-xs rounded-full bg-gray-100 text-gray-600">
                {logsTotal}
              </span>
            )}
          </button>
        ))}
      </nav>
    </div>
  )
}