// import React, { useCallback } from 'react';
// import useDarkMode from '@/utils/hooks/useDarkMode';
// import { Switcher } from '@/components/ui';

// const ModeSwitcher = () => {
//   const [isDark, setIsDark] = useDarkMode();

//   const onSwitchChange = useCallback(
//     (checked) => {
//       setIsDark(checked ? 'dark' : 'light');
//     },
//     [setIsDark],
//   );

//   return (
//     <div className="hidden">
//       <Switcher defaultChecked={isDark} onChange={(checked) => onSwitchChange(checked)} />
//     </div>
//   );
// };

// export default ModeSwitcher;

import React, { useCallback } from 'react';
import useDarkMode from '@/utils/hooks/useDarkMode';
import { MdDarkMode, MdWbSunny } from 'react-icons/md';
import { Button } from '@/components/ui';
import { t } from 'i18next';

const ModeSwitcher = () => {
  const [isDark, setIsDark] = useDarkMode();

  const toggleDarkMode = useCallback(() => {
    setIsDark(isDark ? 'light' : 'dark');
  }, [isDark, setIsDark]);

  return (
    <div>
      {!isDark ? (
        <Button
          onClick={toggleDarkMode}
          icon={<MdDarkMode />}
          size="md"
          variant="plain"
          shape="circle"
          title={t('DARK_MODE')}
          className="text-nafithBlueColor-500 dark:text-gray-100 hover:text-sky-950 dark:hover:text-gray-100"
        />
      ) : (
        <Button
          onClick={toggleDarkMode}
          icon={<MdWbSunny />}
          size="md"
          variant="plain"
          shape="circle"
          title={t('LIGHT_MODE')}
          className="text-nafithBlueColor-500 dark:text-gray-100 hover:text-nafithBlueColor-500 dark:hover:text-gray-100"
        />
      )}
    </div>
  );
};

export default ModeSwitcher;
