import { jsx } from 'react/jsx-runtime';
import React__default from 'react';
import { Bars3Icon } from '@heroicons/react/24/outline';
import { cn } from '../../../utils/cn.js';
import { useSidebarContext } from './SidebarContext.js';
import { Button } from '../Button/Button.js';

const SidebarMobileTrigger = React__default.forwardRef(({ icon, className, onClick, ...props }, ref) => {
    const sidebarContext = useSidebarContext();
    if (!sidebarContext) {
        if (process.env.NODE_ENV !== "production") {
            console.warn("SidebarMobileTrigger must be used within a Sidebar component");
        }
        return null;
    }
    const { isMobile, setMobileOpen } = sidebarContext;
    // Only render on mobile
    if (!isMobile)
        return null;
    const handleClick = (e) => {
        setMobileOpen(true);
        onClick === null || onClick === void 0 ? void 0 : onClick(e);
    };
    const { onAnimationStart, onAnimationEnd, onDrag, onDragStart, onDragEnd, color: _color, ...buttonProps } = props;
    return (jsx(Button, { ref: ref, variant: "soft", size: "sm", className: cn("size-9 p-0", className), onClick: handleClick, "aria-label": "Open navigation menu", ...buttonProps, children: icon || jsx(Bars3Icon, { className: "size-5" }) }));
});
SidebarMobileTrigger.displayName = "SidebarMobileTrigger";

export { SidebarMobileTrigger };
