'use client'

import React from 'react'

interface LanguageSwitcherProps {
  currentLang: string
  onLangChange: (lang: string) => void
  isDark: boolean
  compact?: boolean
}

const LANGS = [
  { code: 'de', label: 'DE' },
  { code: 'en', label: 'EN' },
  { code: 'tr', label: 'TR' },
  { code: 'ar', label: 'AR' },
  { code: 'uk', label: 'UK' },
  { code: 'ru', label: 'RU' },
  { code: 'pl', label: 'PL' },
]

/**
 * Compact language switcher for exercise pages.
 * Shows as dropdown or pill buttons depending on compact prop.
 */
export function LanguageSwitcher({ currentLang, onLangChange, isDark, compact = true }: LanguageSwitcherProps) {
  if (compact) {
    return (
      <select
        value={currentLang}
        onChange={e => onLangChange(e.target.value)}
        className={`text-xs px-2 py-1 rounded-lg border-0 cursor-pointer ${
          isDark ? 'bg-white/10 text-white/70' : 'bg-slate-100 text-slate-600'
        }`}
      >
        {LANGS.map(l => <option key={l.code} value={l.code}>{l.label}</option>)}
      </select>
    )
  }

  return (
    <div className="flex gap-1">
      {LANGS.map(l => (
        <button
          key={l.code}
          onClick={() => onLangChange(l.code)}
          className={`px-2 py-1 rounded-lg text-xs font-medium transition-all ${
            currentLang === l.code
              ? 'bg-blue-500 text-white'
              : isDark ? 'bg-white/5 text-white/40 hover:bg-white/10' : 'bg-slate-100 text-slate-400 hover:bg-slate-200'
          }`}
        >
          {l.label}
        </button>
      ))}
    </div>
  )
}