"use client";
import { Button } from "@/components/ui/button";
import { useSidebar } from "@/components/ui/sidebar";
import { cn } from "@/lib/utils";
import { ChevronRightIcon, MenuIcon } from "lucide-react";

export function SidebarTrigger() {
  const { toggleSidebar, state, isMobile } = useSidebar();
  const open = state === "expanded";
  return (
    <Button onClick={toggleSidebar} size={"icon"} variant={"ghost"}>
      {isMobile ? (
        <MenuIcon className="size-4" />
      ) : (
        <ChevronRightIcon
          className={cn(
            "transition-transform duration-150",
            open && "rotate-180",
          )}
        />
      )}
    </Button>
  );
}