'use client';

import { useParams, usePathname, useRouter } from 'next/navigation';
import { cn } from '@/lib';
import { CommentIcon } from '@/assets/chatacter';
import CharacterReview from './Review';
import CharacterList from './List';

export default function TabsNavigation() {
  const router = useRouter();
  const pathname = usePathname();
  const { id } = useParams();

  const tabs = [
    { path: '/review', Icon: CommentIcon, label: 'Review' },
    {
      path: '/list',
      label: 'Character List',
    },
  ];

  return (
    <>
      <div className="mt-11 flex w-full max-w-300 items-center justify-start gap-5">
        {tabs.map((tab, index) => {
          const isActive = pathname.includes(tab.path);
          const dom = (
            <div
              onClick={() => router.push(`/character/${id}${tab.path}`)}
              className={cn(
                'flex gap-2.5 hover:cursor-pointer',
                !isActive && 'text-text-color/60'
              )}
              key={tab.path}
            >
              {tab.Icon ? <tab.Icon /> : null}
              {tab.label}
            </div>
          );
          return [
            !!index && (
              <div
                key={`divider_${index}`}
                className="bg-text-color/10 h-2.5 w-0.5"
              ></div>
            ),
            dom,
          ];
        })}
      </div>
      <div className="mt-10 w-full max-w-300">
        {pathname.includes('/review') ? <CharacterReview /> : <CharacterList />}
      </div>
    </>
  );
}
