import useTheme from '../../../hooks/useTheme'
const themes = ['black', 'coffee', 'cyberpunk', 'lofi', 'retro']

const ThemeSelector = (): JSX.Element => {
  const { setTheme } = useTheme()

  return (
    <select
      className="select w-full max-w-xs"
      onChange={(event) => setTheme(event.target.value)}
    >
      {themes.map((item) => (
        <option key={item} value={item}>
          {item}
        </option>
      ))}
    </select>
  )
}

export default ThemeSelector