import React from 'react';
import { useLanguage } from '../contexts/LanguageContext';
import type { Theme } from '../data/types';

type Props = Readonly<{
  theme: Theme;
  setTheme: React.Dispatch<React.SetStateAction<Theme>>;
}>;

export default function ThemeToggle({
  theme,
  setTheme
}: Props) {
  const { texts } = useLanguage();

  const toggleTheme = () => {
    setTheme(theme === 'light' ? 'dark' : 'light');
  };

  return (
    <button
      className="navbar__container__button toggle-theme"
      onClick={toggleTheme}
      aria-label={`Switch to ${theme === 'light' ? texts.themeToggle.lightModeText : texts.themeToggle.darkModeText} mode`}
    >
      <span className="toggle-theme__icon">
        {theme === 'light' ? texts.themeToggle.lightIcon : texts.themeToggle.darkIcon}
      </span>
    </button>
  );
}
