'use client'

import { useLocale } from 'next-intl'
import { useRouter, usePathname } from '@/i18n/routing'
import { ChangeEvent } from 'react'
import { cn } from '@/lib/utils'
import { Globe } from 'lucide-react'

export default function LocaleSwitcher({ scrolled }: { scrolled: boolean }) {
  const locale = useLocale()
  const router = useRouter()
  const pathname = usePathname()

  const onSelectChange = (e: ChangeEvent<HTMLSelectElement>) => {
    const nextLocale = e.target.value
    router.replace({ pathname }, { locale: nextLocale as any })
  }

  return (
    <div className="relative flex items-center">
      <Globe className={cn(
        "w-4 h-4 absolute left-2 pointer-events-none transition-colors",
        scrolled ? "text-foreground" : "text-white"
      )} />
      <select
        value={locale}
        onChange={onSelectChange}
        className={cn(
          "appearance-none bg-transparent border-none py-1 pl-8 pr-4 text-sm font-medium focus:ring-0 focus:outline-none cursor-pointer uppercase transition-colors",
          scrolled ? "text-foreground" : "text-white"
        )}
      >
        <option value="tr" className="text-foreground">TR</option>
        <option value="en" className="text-foreground">EN</option>
        <option value="de" className="text-foreground">DE</option>
      </select>
    </div>
  )
}