'use client';

import { useTheme, getThemeIcon } from '@zen/core/themes';

export default function ThemeToggle() {
    const { theme, toggle, systemIsDark } = useTheme();
    const Icon = getThemeIcon(theme, systemIsDark);

    return (
        <button
            onClick={toggle}
            aria-label="Changer le thème"
            title="Changer le thème"
            className="cursor-pointer p-2 rounded-lg text-neutral-500 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800/50 hover:text-neutral-900 dark:hover:text-white transition-colors duration-200"
        >
            <Icon className="h-4 w-4" />
        </button>
    );
}
