'use client';

// ---------------------------------------------------------------------------------------------------------------------
//!                                                      Imports
// ---------------------------------------------------------------------------------------------------------------------

// --------------------------------------------------- Components ------------------------------------------------------
import Link from 'next/link';
// ---------------------------------------------------------------------------------------------------------------------

// -------------------------------------------------- Hooks & Utils ----------------------------------------------------
import { usePathname } from 'next/navigation';
import config from './config';
// ---------------------------------------------------------------------------------------------------------------------

// ------------------------------------------------- Assets & Styles ---------------------------------------------------
import './styles.scss';
// ---------------------------------------------------------------------------------------------------------------------

const Navbar = () => {
	const pathname = usePathname();

	return (
		<nav
			className='navbar'
			style={{
				gridTemplateColumns: `repeat(${config.length}, 1fr)`,
			}}
		>
			{config.map((element) => (
				<Link
					key={element.title}
					href={element.link}
					className={`navButton ${
						element.link == pathname ? 'selected' : ''
					}`}
				>
					{element.icon()}
					<span className='navButtonLabel'>{element.title}</span>
				</Link>
			))}
		</nav>
	);
};

export default Navbar;