import React, { useState } from 'react';
import { Sun, Moon } from 'lucide-react';
import styles from './index.module.scss';

const CustomToggle = ({ isOn, onToggle }: { isOn: boolean, onToggle: (isOn: boolean) => void }) => {
    const toggleHandler = () => {
        onToggle(!isOn);
    };

    return (
        <button
            className={`${styles.toggleSlot} ${isOn ? styles.active : ''}`}
            onClick={toggleHandler}
            aria-label={isOn ? "Switch to light theme" : "Switch to dark theme"}
            aria-pressed={isOn}
        >
            <div className={styles.iconWrapper}></div>
        </button>
    );
};


export default CustomToggle;