import React from 'react';
import { useLanguage } from '../hooks/useLanguage';
import './LanguageSwitcher.css';

const LanguageSwitcher = () => {
  const { language, setLanguage, t } = useLanguage();

  const handleLanguageChange = (newLanguage) => {
    setLanguage(newLanguage);
  };

  return (
    <div className="language-switcher">
      <span className="language-label">{t('language')}:</span>
      <div className="language-buttons">
        <button
          className={`language-btn ${language === 'en' ? 'active' : ''}`}
          onClick={() => handleLanguageChange('en')}
          aria-label="Switch to English"
        >
          {t('english')}
        </button>
        <button
          className={`language-btn ${language === 'fi' ? 'active' : ''}`}
          onClick={() => handleLanguageChange('fi')}
          aria-label="Vaihda suomeksi"
        >
          {t('finnish')}
        </button>
      </div>
    </div>
  );
};

export default LanguageSwitcher;