resources/js/components/appearance-toggle.tsx

import { Moon, Sun } from 'lucide-react';
import { useEffect, useState } from 'react';
import { Button } from '@/components/ui/button';
import { useAppearance } from '@/hooks/use-appearance';
import { cn } from '@/lib/utils';

type AppearanceToggleProps = {
    className?: string;
};

export default function AppearanceToggle({ className }: AppearanceToggleProps) {
    const { resolvedAppearance, updateAppearance } = useAppearance();
    const [isMounted, setIsMounted] = useState(false);
    const isDarkMode = isMounted && resolvedAppearance === 'dark';

    useEffect(() => {
        setIsMounted(true);
    }, []);

    const handleToggle = (): void => {
        updateAppearance(isDarkMode ? 'light' : 'dark');
    };

    return (
        <Button
            variant="outline"
            size="icon"
            type="button"
            onClick={handleToggle}
            className={cn('welcome-theme-toggle', className)}
            aria-label="Toggle appearance"
        >
            {isDarkMode ? (
                <Sun className="h-4 w-4" />
            ) : (
                <Moon className="h-4 w-4" />
            )}
        </Button>
    );
}