"use client"

import Link from "next/link";
import { usePathname } from "next/navigation";
import { SidebarMenuButton, SidebarMenuItem, useSidebar } from "@/components/ui/sidebar";

export function SidebarMenuLink({
    title,
    url,
    icon,
}: {
    title: string;
    url: string;
    icon: React.ReactNode;
}) {
    const pathname = usePathname();
    const { setOpenMobile } = useSidebar();
    const isActive = pathname === url;

    return (
        <SidebarMenuItem>
            <SidebarMenuButton
                render={<Link href={url} onClick={() => setOpenMobile(false)} />}
                isActive={isActive}
                className="h-10 text-[0.95rem]"
            >
                {icon}
                <span>{title}</span>
            </SidebarMenuButton>
        </SidebarMenuItem>
    )
}