'use client';
import { jsx as _jsx } from "react/jsx-runtime";
import { PanelLeft } from 'lucide-react';
import { useSidebar } from '../../ui/sidebar.js';
import { Button } from '../../ui/button.js';
import { cn } from '../../../lib/utils.js';
import { useSoundAction } from '../../../hooks/use-sound-action.js';
export function SidebarCollapseToggle({ className }) {
    const { toggleSidebar, open } = useSidebar();
    const expandSound = useSoundAction('expand');
    const collapseSound = useSoundAction('collapse');
    const label = open ? 'Collapse sidebar' : 'Expand sidebar';
    const handleClick = () => {
        // Play sound based on current state (before toggle)
        if (open) {
            collapseSound.play();
        }
        else {
            expandSound.play();
        }
        toggleSidebar();
    };
    return (_jsx("div", { className: cn('flex', className), children: _jsx(Button, { "data-testid": "sidebar-collapse-toggle", variant: "ghost", size: "icon", className: "size-7 cursor-pointer group-data-[collapsible=icon]:size-8!", onClick: handleClick, "aria-label": label, children: _jsx(PanelLeft, { className: "size-4" }) }) }));
}
