'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { AppRoute } from './routes';

export function SidebarLinks({ routes }: { routes: AppRoute[] }) {
  const pathname = usePathname();

  const isActive = (route: AppRoute) =>
    pathname?.includes(`${route.layout}/${route.path}`);

  return (
    <ul className="mb-auto pt-1">
      {routes.map((route) => (
        <Link key={route.path} href={`${route.layout}/${route.path}`}>
          <div className="relative mb-3 flex hover:cursor-pointer">
            <li className="my-[3px] flex cursor-pointer items-center px-8">
              <p
                className={`leading-1 ml-4 flex ${
                  isActive(route)
                    ? 'font-bold text-navy-700 dark:text-white'
                    : 'font-medium text-gray-600'
                }`}
              >
                {route.name}
              </p>
            </li>
            {isActive(route) && (
              <div className="absolute right-0 top-px h-9 w-1 rounded-lg bg-brand-500 dark:bg-brand-400" />
            )}
          </div>
        </Link>
      ))}
    </ul>
  );
}