"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import React, { memo, useCallback } from "react";

import styles from "./category-list.module.css";

const CategoryList = memo(function CategoryList({
  menus,
}: {
  menus: Array<{ id: string; slug: string; name: string }>;
}) {
  const pathname = usePathname();

  const lastPath = useCallback((path: string, menu?: any) => {
    const slug = path.split("menu/")?.[1] || "";
    return (slug && slug === menu.slug) || (!slug && menu.sortOrder === 0);
  }, []);

  return (
    <div className="categoryListSection main-container">
      <div className="categoryContainer boxed-content">
        <div className="categoryListWrapper">
          {menus.map((menu, index) => (
            <Link
              key={menu?.id}
              href={`/menu/${menu.slug}`}
              className={`${styles["menu-item"]} ${
                lastPath(pathname, menu) ? styles.active : ""
              }`}
            >
              <span className={styles.smallDot}></span> {menu.name}
            </Link>
          ))}
        </div>
      </div>
    </div>
  );
});

export default CategoryList;