import { useLanguage } from '@/utils/LanguageProvider';
import styles from '../styles/Toggle.module.css';

export default function Toggle({className}) {
  const { language, changeLanguage } = useLanguage();

  const onLanguageChange = (e) => { 
    console.log('CHECKED', e.target.checked);
    changeLanguage(e.target.checked ? 'ar' : 'en');
  };

  return (
    <center className={className}>
      <div className={styles.switch}>
        <input id="language-toggle" className={`${styles.checkToggle} ${styles.checkToggleRoundFlat}`} type="checkbox" onChange={onLanguageChange} />
          <label for="language-toggle"></label>
          <span className={styles.on}>EN</span>
          <span className={styles.off}>AR</span>
      </div>
    </center>
  );
}
