'use client';

import React from 'react';
import { useMsg } from '@/hooks';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { cn } from '@/lib';
import IconFont from '@/components/ui/iconFont';

const NavRoutes = React.memo(() => {
  const { pageMsg } = useMsg('menu');
  const pathname = usePathname();

  const routes = [
    {
      path: '/novel',
      icon: 'icon-novel',
      label: pageMsg('novel'),
    },
    {
      path: '/video',
      icon: 'icon-video',
      label: pageMsg('video'),
    },
    {
      path: '/character',
      icon: 'icon-character',
      label: pageMsg('character'),
    },
    {
      path: '/record',
      icon: 'icon-record',
      label: pageMsg('record'),
    },
  ];

  return (
    <div className="flex items-center gap-7">
      {routes.map((route) => {
        const isActive = pathname.startsWith(route.path);
        return (
          <Link
            className={cn(
              'flex items-center gap-2',
              isActive
                ? 'text-text-color'
                : 'text-[#2C223F] hover:text-[#4F3F6D]'
            )}
            key={route.path}
            href={route.path}
          >
            <IconFont size={34} type={route.icon} />
            {route.label}
          </Link>
        );
      })}
    </div>
  );
});
export default NavRoutes;
