import { Moon, Sun } from 'lucide-react';
import { cn } from 'helpers/cn';
import { useColorMode } from './ThemeProvider';
import { useTranslation } from '@/components/locales';

type ThemeToggleProps = { colorDark?: boolean; colorLight?: boolean };

export const ThemeToggle = (props: ThemeToggleProps) => {
  const { colorDark, colorLight } = props;
  const { colorMode, setColorMode } = useColorMode();
  const { t } = useTranslation();

  const toggle = () => {
    setColorMode(colorMode === 'dark' ? 'light' : 'dark');
  };

  return (
    <div className="cursor-pointer" onClick={toggle}>
      <Sun
        className={cn(
          'h-[1.2rem] w-[1.2rem] origin-center rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0',
          colorLight && 'text-white',
        )}
      />
      <Moon
        className={cn(
          'absolute -mt-[1.2rem] h-[1.2rem] w-[1.2rem] origin-center rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100',
          colorDark && 'text-black',
        )}
      />
      <span className="sr-only">{t('theme.toggle')}</span>
    </div>
  );
};