import classNames from "./styles/navbarChildMenu.module.css";
import { SidebarMenu } from "backend/types";

interface Props {
	item: NonNullable<SidebarMenu["children"]>[number];
	active: boolean;
}

/**
 * `ChildMenu` is a React functional component that renders a child menu item.
 * It displays the item as a text link.
 *
 * @param props - The component props.
 * @param props.item - The child menu item data.
 * @returns A React element representing a child menu item.
 */
export default function ChildMenu(props: Props) {
	const linkPath = props.item.link.startsWith("/")
		? props.item.link
		: `/${props.item.link}`;

	return (
		<a href={`${linkPath}`}
			className={`${props.active ? "font-bold" : "font-normal"} ${classNames.link} text-blue-600 hover:underline`}
		>
			{props.item.label}
		</a>
	);
}