"use client";

import { ReactNode } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import styles from "./Navbar.module.css";

type Props = {
    href: string;
    children: ReactNode;
    active?: boolean;
};

const NavbarClickable = ({ children, href, active = false }: Props) => {
    const pathname = usePathname();

    return (
        <Link
            href={href}
            className={styles.link}
            data-active={active || pathname === href || undefined}>
            {children}
        </Link>
    );
};

export default NavbarClickable;
