"use client"

import { Button } from "@/app/_components/ui/button"
import { Menu } from "lucide-react"
import { Overlay } from "../overlay"
import { ControlPosition } from "mapbox-gl"

interface SidebarToggleProps {
    isOpen: boolean
    onToggle: () => void
    position?: ControlPosition
}

export default function SidebarToggle({ isOpen, onToggle, position = "left" }: SidebarToggleProps) {
    if (isOpen) return null

    return (
        <Overlay position={position}>
        <Button
            variant="secondary"
            size="icon"
            className="absolute top-4 left-4 z-20 bg-white shadow-md hover:bg-gray-100"
            onClick={onToggle}
        >
            <Menu className="h-5 w-5" />
            <span className="sr-only">Open sidebar</span>
        </Button>
        </Overlay>
    )
}