"use client";
import React from "react";
import {
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  useSidebar,
} from "@/components/ui/sidebar";
import { Icons } from "@/components/icons";
import { appConfig } from "@/config";
import Link from "next/link";
import { cn } from "@/lib/utils";
import { XIcon } from "lucide-react";
import { Button } from "@/components/ui/button";

function NavBranding({ subTitle }: { subTitle: string }) {
  const { isMobile, toggleSidebar } = useSidebar();
  return (
    <SidebarMenu className={cn(isMobile && "flex flex-row items-center")}>
      <SidebarMenuItem className="w-full">
        <SidebarMenuButton size="lg" asChild className="w-full">
          <Link href="/">
            <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-foreground text-background">
              <Icons.logo className="size-4" />
            </div>
            <div className="grid flex-1 text-left text-sm leading-tight">
              <span className="truncate font-semibold">{appConfig.name}</span>
              <span className="truncate text-xs">{subTitle}</span>
            </div>
          </Link>
        </SidebarMenuButton>
      </SidebarMenuItem>
      {isMobile && (
        <SidebarMenuItem className="w-max">
          <SidebarMenuButton asChild>
            <Button variant={"ghost"} size={"icon"} onClick={toggleSidebar}>
              <XIcon className="size-4" />
            </Button>
          </SidebarMenuButton>
        </SidebarMenuItem>
      )}
    </SidebarMenu>
  );
}

export default NavBranding;
