'use client'
import { useChangeLocale, useCurrentLocale } from '@/locales/client'
import { LC, type loc } from '@/config/locales'
import { ChangeEvent } from 'react'
import styles from '@/styles/LocaleSwitcher.module.scss'

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

  return (
    //@ts-ignore
    <select onChange={selectHandler} defaultValue={locale}
            className={styles['yo-locale-switcher']}>
      {LC.map(item => (
        <option key={item.iso} value={item.code}>
          {item.iso.toUpperCase()}
        </option>
      ))}
    </select>
  )
}