/* eslint-disable no-unused-vars */
/* eslint-disable import/prefer-default-export */
/* eslint-disable @typescript-eslint/no-explicit-any */

import { ChangeEvent } from 'react'
import { OptionProps, Select } from 'ui'
import { useTranslationData } from '../hooks/useTranslationData'

export const TranslationDropDown = () => {
  const { handleLangChanged, selectedLang } = useTranslationData()

  const languagesList: OptionProps[] = [
    { label: 'en', value: 'en' },
    { label: 'nl', value: 'nl' },
  ]

  return (
    <Select
      options={languagesList}
      name="Select Language"
      className="py-1 px-4 focus:outline-none"
      value={selectedLang || 'en'}
      onChange={(e: ChangeEvent<HTMLSelectElement>) =>
        handleLangChanged(e.target.value)
      }
    />
  )
}