"use client"

import { Globe } from "lucide-react"

type Lang = "en"

const LANGS: { code: Lang; label: string }[] = [
  { code: "en", label: "EN" },
]

interface LanguageSwitcherProps {
  lang: Lang
  onChange: (lang: Lang) => void
  variant?: "light" | "dark"
}

export function LanguageSwitcher({ lang, onChange, variant = "light" }: LanguageSwitcherProps) {
  const isDark = variant === "dark"
  return (
    <div
      className="flex items-center gap-1 rounded-xl p-1"
      style={{
        background: isDark ? "rgba(255,255,255,0.08)" : "var(--muted)",
        border: `1px solid ${isDark ? "rgba(255,255,255,0.12)" : "var(--border)"}`,
      }}
      role="group"
      aria-label="Language selector"
    >
      <Globe
        className="w-3.5 h-3.5 ml-1 shrink-0"
        style={{ color: isDark ? "rgba(255,255,255,0.5)" : "var(--muted-foreground)" }}
        aria-hidden="true"
      />
      {LANGS.map(({ code, label }) => (
        <button
          key={code}
          onClick={() => onChange(code)}
          aria-pressed={lang === code}
          className="px-2.5 py-1 rounded-lg text-xs font-semibold font-sans transition-all duration-150"
          style={
            lang === code
              ? {
                  background: "var(--brand-green)",
                  color: "#fff",
                  boxShadow: "0 1px 4px rgba(43,182,115,0.3)",
                }
              : {
                  color: isDark ? "rgba(255,255,255,0.55)" : "var(--muted-foreground)",
                }
          }
        >
          {label}
        </button>
      ))}
    </div>
  )
}