'use client';

import * as React from 'react';
import { useTheme } from 'next-themes';
import Image from 'next/image';
import { cn } from '@/lib/utils';

export function ThemeToggle({ className }: { className?: string }) {
  const { theme, setTheme } = useTheme();
  const [mounted, setMounted] = React.useState(false);

  React.useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) {
    return <div className={cn('h-16 w-16', className)} />;
  }

  const isDark = theme === 'dark';

  const toggleTheme = () => {
    setTheme(isDark ? 'light' : 'dark');
  };

  return (
    <button
      onClick={toggleTheme}
      className={cn(
        "relative w-16 h-16 transition-transform hover:scale-110 active:scale-95 cursor-pointer",
        className
      )}
      aria-label="Toggle theme"
    >
      <Image
        src={isDark ? "/lever-down.png" : "/lever-up.png"}
        alt={isDark ? "Dark mode lever" : "Light mode lever"}
        width={64}
        height={64}
        className="object-contain"
        priority
      />
    </button>
  );
}
