import { useTranslation } from 'react-i18next'
import { Globe } from 'lucide-react'
import type { Lang } from './index'

const OPTS: { code: Lang; label: string }[] = [
  { code: 'en', label: 'EN' },
  { code: 'ko', label: '한국어' },
]

/**
 * 언어 스위처 (EN / 한국어 토글).
 * variant="shop"  → 스토어프론트 라이트 무드
 * variant="admin" → 관리자 NCloud 다크
 */
export default function LanguageSwitcher({ variant = 'shop' }: { variant?: 'shop' | 'admin' }) {
  const { i18n } = useTranslation()
  const current = (i18n.language || 'en').split('-')[0]

  const change = (code: Lang) => {
    if (code !== current) i18n.changeLanguage(code)
  }

  const isAdmin = variant === 'admin'
  const wrap = isAdmin
    ? 'flex items-center gap-0.5 rounded-lg border border-edge bg-card/60 p-0.5'
    : 'flex items-center gap-0.5 rounded-full border border-blush-100 bg-white/70 p-0.5 shadow-soft'

  return (
    <div className="flex items-center gap-1.5" aria-label="Language">
      <Globe size={15} className={isAdmin ? 'text-slate-400' : 'text-sage-600'} />
      <div className={wrap} role="group">
        {OPTS.map(o => {
          const active = o.code === current
          const base = 'px-2 py-0.5 text-[11px] font-medium rounded-full transition-colors'
          const cls = isAdmin
            ? active
              ? 'bg-brand text-ink'
              : 'text-slate-300 hover:text-brand'
            : active
              ? 'bg-blush-500 text-white'
              : 'text-sage-700 hover:text-blush-600'
          return (
            <button
              key={o.code}
              type="button"
              onClick={() => change(o.code)}
              aria-pressed={active}
              className={`${base} ${isAdmin ? 'rounded-md' : ''} ${cls}`}
            >
              {o.label}
            </button>
          )
        })}
      </div>
    </div>
  )
}
