// frontend/src/components/UI/ThemeButton.tsx

import { Moon, Sun } from 'lucide-react';

interface ThemeButtonProps {
    darkMode: boolean;
    setDarkMode: (value: boolean) => void;
}

export default function ThemeButton({ darkMode, setDarkMode }: ThemeButtonProps) {
    return (
        <div className="fixed bottom-6 sm:bottom-8 right-6 sm:right-8 z-40 print:hidden">
            <button
                onClick={() => setDarkMode(!darkMode)}
                title="Toggle Theme"
                className="p-4 sm:p-5 bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 rounded-3xl sm:rounded-4xl shadow-2xl transition hover:scale-110 active:scale-95 border-2 border-zinc-700 dark:border-zinc-300 group"
            >
                {darkMode ? <Sun size={24} strokeWidth={2.5} className="sm:size-7" /> : <Moon size={24} strokeWidth={2.5} className="sm:size-7" />}
            </button>
        </div>
    );
}