'use client'

type TabId = 'overview' | 'lessons' | 'enrollments' | 'videos'

interface CourseTabsProps {
  activeTab: TabId
  onTabChange: (tab: TabId) => void
}

const TAB_LABELS: Record<TabId, string> = {
  overview: 'Uebersicht',
  lessons: 'Lektionen',
  enrollments: 'Einschreibungen',
  videos: 'Videos',
}

export function CourseTabs({ activeTab, onTabChange }: CourseTabsProps) {
  return (
    <div className="border-b border-gray-200">
      <nav className="flex gap-1 -mb-px">
        {(['overview', 'lessons', 'enrollments', 'videos'] as TabId[]).map(tab => (
          <button
            key={tab}
            onClick={() => onTabChange(tab)}
            className={`px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
              activeTab === tab
                ? 'border-purple-600 text-purple-600'
                : 'border-transparent text-gray-500 hover:text-gray-700'
            }`}
          >
            {TAB_LABELS[tab]}
          </button>
        ))}
      </nav>
    </div>
  )
}