'use client'

import { useChangeLocale, useCurrentLocale } from '@/locales/client'
import { LC, type loc } from '@/config/locales'
import { ChangeEvent } from 'react'

export default function LocaleSwitcher () {
  const changeLocale = useChangeLocale()
  const locale = useCurrentLocale()
  const selectHandler = (e: ChangeEvent<HTMLSelectElement>) =>
    changeLocale(e.target.value as loc)

// {cn(styles['yo-locale-switcher'], 'pr-4')}
  return (//@ts-ignore
    <form><select
      className="appearance-none bg-transparent block text-center text-xs text-sky-600 py-1 px-2 my-2 mx-0 outline-0"
      aria-label="Switch locale"
      defaultValue={locale} onChange={selectHandler}
    >
      {LC.map(item => (<option key={item.iso} value={item.code} className="pr-4">
        {item.iso.toUpperCase()}
      </option>))}
    </select></form>)
}