'use client';

import { useDispatch, useSelector } from 'react-redux';
import { toggleSidebar } from '@/store/themeConfigSlice';
import { IRootState } from '@/store';

const SidebarToggleButton = () => {
    const dispatch = useDispatch();
    const themeConfig = useSelector((state: IRootState) => state.themeConfig);

    return (
        <button
            type="button"
            className="flex h-8 w-8 items-center justify-center rounded-full transition duration-300 hover:bg-gray-500/10 dark:text-white-light dark:hover:bg-dark-light/10"
            onClick={() => dispatch(toggleSidebar())}
            // Optional: You might want to hide this button if the sidebar is already open
            // or show a different icon depending on the sidebar state.
            // For simplicity, it just toggles.
        >
            {/* You can use a generic menu icon here, or condition it based on themeConfig.sidebar */}
            
        </button>
    );
};

export default SidebarToggleButton;