import classNames from "classnames";
import classes from "./classes.module.scss";
import Link from "next/link";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
import { useRouter } from "next/router";

type ITabItem = {
	label: string;
	path: string;
	activePaths?: string[];
};

type IProps = {
	items: ITabItem[];
};

export default function NavTab(props: IProps) {
	const router = useRouter();
	return (
		<div className={classes["root"]}>
			<nav>
				{props.items.map((item, index) => {
					let isMatch = false;
					if (item.activePaths) {
						isMatch = item.activePaths.some((path) => router.pathname.includes(path));
					} else {
						isMatch = router.pathname.includes(item.path) ? true : false;
					}
					return (
						<Link
							key={item.path.toString()}
							href={item.path}
							className={classNames(classes["link"], isMatch && classes["active"])}>
							<Typography key={index} typo={isMatch ? ITypo.TEXT_LG_SEMIBOLD : ITypo.TEXT_LG_REGULAR}>
								{item.label}
							</Typography>
						</Link>
					);
				})}
			</nav>
		</div>
	);
}