import { ChevronDown, Languages } from 'lucide-react'
import { useLocale } from '../context/LocaleContext'
import type { DashboardLocale } from '@meshkee/dashboard-core'
import styles from './LanguageSelect.module.css'

const OPTIONS: { value: DashboardLocale; label: string }[] = [
  { value: 'en', label: 'EN' },
  { value: 'fa', label: 'فا' },
]

export function LanguageSelect() {
  const { locale, setLocale } = useLocale()

  return (
    <label className={styles.wrap}>
      <span className={styles.srOnly}>Language</span>
      <Languages size={16} className={styles.icon} aria-hidden />
      <select
        className={styles.select}
        value={locale}
        onChange={(e) => setLocale(e.target.value as DashboardLocale)}
        aria-label="Language"
      >
        {OPTIONS.map((option) => (
          <option key={option.value} value={option.value}>
            {option.label}
          </option>
        ))}
      </select>
      <ChevronDown size={14} className={styles.chevron} aria-hidden />
    </label>
  )
}