frontend/src/components/common/TabNavigation.tsx

import React from 'react'
import { Mic, Music, Disc3 } from 'lucide-react'

interface TabNavigationProps {
  activeTab: 'enrollment' | 'synthesis' | 'song-generation'
  onTabChange: (tab: 'enrollment' | 'synthesis' | 'song-generation') => void
}

export const TabNavigation: React.FC<TabNavigationProps> = ({ activeTab, onTabChange }) => {
  const tabs = [
    { id: 'enrollment', label: 'Voice Enrollment', icon: Mic },
    { id: 'synthesis', label: 'Speech Synthesis', icon: Music },
    { id: 'song-generation', label: 'Song Generation', icon: Disc3 },
  ] as const

  return (
    <div className="flex gap-2 mb-6 bg-white p-2 rounded-lg border border-gray-200">
      {tabs.map(({ id, label, icon: Icon }) => (
        <button
          key={id}
          onClick={() => onTabChange(id)}
          className={`flex-1 py-2 px-3 rounded-lg font-medium transition-all flex items-center justify-center gap-2 ${
            activeTab === id
              ? 'bg-blue-600 text-white shadow-md'
              : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
          }`}
        >
          <Icon className="h-4 w-4" />
          <span className="hidden sm:inline">{label}</span>
          <span className="sm:hidden text-xs">{label.split(' ')[0]}</span>
        </button>
      ))}
    </div>
  )
}