import { useTheme } from '@/context/theme-context';
import { MoonIcon, SunIcon } from '@phosphor-icons/react';
import { useTranslation } from 'react-i18next';
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '../ui/tooltip';

export function ThemeToggle() {
  const { theme, toggleTheme } = useTheme();
  const { t } = useTranslation();

  return (
    <TooltipProvider delayDuration={0}>
      <Tooltip>
        <TooltipTrigger
          onClick={toggleTheme}
          className="flex h-10 w-10 cursor-pointer items-center justify-center rounded-md transition-[background] duration-300 ease-out hover:bg-accent"
        >
          {theme === 'dark' ? (
            <SunIcon
              weight="bold"
              className="size-6 opacity-80 group-hover:opacity-100"
            />
          ) : (
            <MoonIcon
              weight="bold"
              className="size-6 text-black dark:text-white"
            />
          )}
        </TooltipTrigger>

        <TooltipContent>
          <p>{theme === 'dark' ? t('Light') : t('Dark')}</p>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}