import Link from 'next/link';

import styles from './MenuSublinks.module.css';

import { SubNavigationItem } from '@/lib/types/navigation';
import { useCurrentPath } from '@/hooks/useCurrentPath';

interface MenuSublinks {
  sublinks: readonly SubNavigationItem[];
  variant: string;
}

export default function MenuSublinks({ sublinks, variant }: MenuSublinks) {
  const { isCurrentPath } = useCurrentPath();
  return (
    <ul className={`${styles.list} ${styles[`${variant}`]}`}>
      {sublinks.map((sublink: SubNavigationItem) => (
        <li className={styles.item} key={sublink.path}>
          <Link
            href={sublink.path}
            className={`${styles.sublink} ${isCurrentPath(sublink.path) ? styles.current : ''}`}
          >
            {sublink.name}
          </Link>
        </li>
      ))}
    </ul>
  );
}