"use client"

// ─── Types ────────────────────────────────────────────────────────────────────

export type Language = "en" | "tr" | "ar"

export interface LanguageOption {
  key: Language
  label: string
  nativeLabel: string
  flag: string
}

// ─── Constants ────────────────────────────────────────────────────────────────

export const LANGUAGES: LanguageOption[] = [
  { key: "en", label: "English", nativeLabel: "English", flag: "🇬🇧" },
  { key: "tr", label: "Turkish", nativeLabel: "Türkçe",  flag: "🇹🇷" },
  { key: "ar", label: "Arabic",  nativeLabel: "العربية", flag: "🇸🇦" },
]

// ─── Component ────────────────────────────────────────────────────────────────

interface LanguageTabsProps {
  activeLanguage: Language
  onChange: (language: Language) => void
  disabled?: boolean
}

export function LanguageTabs({ activeLanguage, onChange, disabled = false }: LanguageTabsProps) {
  return (
    <div className="flex flex-col gap-4">
      {/* Tab buttons */}
      <div
        role="tablist"
        aria-label="Select editing language"
        className="flex items-center gap-2"
      >
        {LANGUAGES.map((lang) => {
          const isActive = activeLanguage === lang.key
          return (
            <button
              key={lang.key}
              role="tab"
              type="button"
              id={`language-tab-${lang.key}`}
              aria-selected={isActive}
              aria-controls={`language-panel-${lang.key}`}
              onClick={() => onChange(lang.key)}
              disabled={disabled}
              className={[
                "relative flex flex-1 items-center justify-center gap-2 px-4 py-2.5",
                "rounded-lg text-sm font-semibold font-sans transition-all duration-200",
                "select-none focus-visible:outline-none",
                "focus-visible:ring-2 focus-visible:ring-offset-1",
                disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer",
                isActive
                  ? "text-white shadow-md"
                  : "hover:opacity-90",
              ].join(" ")}
              style={
                isActive
                  ? {
                      background: "var(--brand-green)",
                    
                    }
                  : {
                      background: "rgba(29,45,104,0.07)",
                      color: "var(--brand-navy)",
                    }
              }
            >
              {/* Flag */}
              <span className="text-base leading-none" aria-hidden="true">
                {lang.flag}
              </span>

              {/* Label */}
              <span className="hidden sm:inline leading-none">{lang.nativeLabel}</span>
              <span className="sm:hidden text-xs font-bold leading-none uppercase">
                {lang.key}
              </span>

           
            </button>
          )
        })}
      </div>

      {/* Active language hint */}
      <div
        className="flex items-center gap-2.5 px-4 py-2.5 rounded-lg text-sm font-sans font-medium"
        style={{
          background: "rgba(43,182,115,0.08)",
          borderLeft: "3px solid var(--brand-green)",
          color: "var(--brand-navy)",
        }}
        role="status"
        aria-live="polite"
      >
        <span
          className="w-2 h-2 rounded-full shrink-0"
          style={{ background: "var(--brand-green)" }}
          aria-hidden="true"
        />
        <span>
          {activeLanguage === "en" && "You are editing the English version of this page."}
          {activeLanguage === "tr" && "Sayfanın Türkçe sürümünü düzenliyorsunuz."}
          {activeLanguage === "ar" && "أنت تعدّل النسخة العربية من هذه الصفحة."}
        </span>
      </div>
    </div>
  )
}