"use client"
import { ChevronLeft, ChevronRight } from "lucide-react"
import { Button } from "../../ui/button"
import { cn } from "@/app/_lib/utils"
import { Overlay } from "../overlay"

interface SidebarToggleProps {
    isOpen: boolean
    onToggle: () => void
    position?: "left" | "right"
    className?: string
}

export default function SidebarToggle({ isOpen, onToggle, position = "left", className }: SidebarToggleProps) {
    return (
        <Overlay position={position}>
        <Button
            variant="secondary"
                size="icon"
            onClick={onToggle}
                className={cn(
                    "absolute z-10 shadow-md h-8 w-8 bg-background border"
                )}
        >
                {isOpen ? (
                    position === "left" ? (
                        <ChevronLeft className="h-4 w-4" />
                    ) : (
                        <ChevronRight className="h-4 w-4" />
                    )
                ) : position === "left" ? (
                    <ChevronRight className="h-4 w-4" />
                ) : (
                    <ChevronLeft className="h-4 w-4" />
                )}
                <span className="sr-only">{isOpen ? "Close sidebar" : "Open sidebar"}</span>
        </Button>
        </Overlay>
    )
}