"use client"
import { useRouter } from "next/navigation"
import Image from "next/image"
import { useLocale } from "next-intl"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import tm from "@/public/tm.png"
import ru from "@/public/ru.png"

interface Language {
  code: string
  name: string
  flag: any
}

const LANGUAGES: Language[] = [
  { code: "ru", name: "Russian", flag: ru },
  { code: "tm", name: "Turkmen", flag: tm },
]

export default function LanguageSelector() {
  const locale = useLocale()
  const router = useRouter()

  const handleLanguageChange = (newLocale: string) => {
    router.push(`/${newLocale}`)
  }

  return (
    <Select value={locale} onValueChange={handleLanguageChange}>
      <SelectTrigger className="w-[70px] rounded-xl border-gray-300">
        <SelectValue>
          <FlagIcon locale={locale} />
        </SelectValue>
      </SelectTrigger>
      <SelectContent>
        {LANGUAGES.map((language) => (
          <SelectItem key={language.code} value={language.code}>
            <div className="flex items-center gap-2">
              <FlagIcon locale={language.code} />
              <span>{language.name}</span>
            </div>
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  )
}

function FlagIcon({ locale }: { locale: string }) {
  const language = LANGUAGES.find((lang) => lang.code === locale)

  if (!language) return null

  return (
    <div className="relative h-5 w-7">
      <Image src={language.flag || "/placeholder.svg"} alt={language.name} fill className="object-cover rounded" />
    </div>
  )
}