import { Sun, Moon } from "lucide-react";
import { cn } from "@utils/utils";

interface ThemeToggleProps {
  isDark: boolean;
  toggleTheme: () => void;
}

export function ThemeToggle({ isDark, toggleTheme }: ThemeToggleProps) {
  
  const lightInset = "shadow-[inset_4px_4px_8px_#c5c5c5,inset_-4px_-4px_8px_#ffffff]";
  const darkInset = "dark:shadow-[inset_4px_4px_8px_#121926,inset_-4px_-4px_8px_#2a3850]";
  
  const lightExtrude = "shadow-[3px_3px_6px_#c5c5c5,-3px_-3px_6px_#ffffff]";
  const darkExtrude = "dark:shadow-[3px_3px_6px_#121926,-3px_-3px_6px_#2a3850]";

  return (
    <button 
      onClick={toggleTheme}
      // 1. On ajoute la transition globale sur le fond du bouton principal
      className="group relative flex items-center w-20 h-10 rounded-full bg-[#e8e8e8] dark:bg-[#1e293b] outline-none cursor-pointer shrink-0 transition-all duration-300 ease-in-out"
      aria-label="Basculer le thème"
    >
      {/* 2. Le Rail : On s'assure qu'il est bien à 300ms ease-in-out */}
      <div className={cn(
        "absolute inset-0 rounded-full transition-all duration-300 ease-in-out",
        lightInset, darkInset
      )}></div>

      {/* 3. La Bille : On remplace 'transition-transform duration-500' par la transition globale */}
      <div className={cn(
        "absolute left-1 w-8 h-8 rounded-full bg-[#e8e8e8] dark:bg-[#1e293b] z-10 flex items-center justify-center",
        "transition-all duration-300 ease-in-out", // <-- LA CORRECTION EST ICI
        lightExtrude, darkExtrude,
        isDark ? "translate-x-10" : "translate-x-0"
      )}>
        
        {/* 4. Les icônes : On les passe aussi à 300ms pour que la rotation suive le mouvement */}
        <Sun className={cn(
          "absolute w-4 h-4 text-amber-500 transition-all duration-300 ease-in-out",
          isDark ? "opacity-0 rotate-90 scale-50" : "opacity-100 rotate-0 scale-100"
        )} strokeWidth={2.5} />
        
        <Moon className={cn(
          "absolute w-4 h-4 text-indigo-400 transition-all duration-300 ease-in-out",
          isDark ? "opacity-100 rotate-0 scale-100" : "opacity-0 -rotate-90 scale-50"
        )} strokeWidth={2.5} />
        
      </div>
    </button>
  );
}