'use client';

import { usePathname } from 'next/navigation';
import Link from 'next/link';
import Image from 'next/image';
import { cn } from '@/lib/utils';
import { useMedia } from '@/hooks/tools';
import { useTranslations } from 'next-intl';

export const items = [
  {
    labelKey: 'explore',
    path: '/home',
    icon: '/images/layout/explore.svg',
    selectedIcon: '/images/layout/explore_active.svg',
  },
  {
    labelKey: 'search',
    path: '/search',
    icon: '/images/layout/search.svg',
    selectedIcon: '/images/layout/search_active.svg',
  },
  {
    labelKey: 'chat',
    path: '/chat-history',
    icon: '/images/layout/chat.svg',
    selectedIcon: '/images/layout/chat_active.svg',
  },
  {
    labelKey: 'me',
    path: '/profile',
    icon: '/images/layout/me.svg',
    selectedIcon: '/images/layout/me_active.svg',
  },
];

export default function BottomBar() {
  const t = useTranslations('bottomBar');
  const pathname = usePathname();
  const response = useMedia({ hide: 500 });

  if (!items.some((i) => i.path === pathname)) {
    return null;
  }

  return (
    <div className="h-20 border-outline-normal bg-[rgba(10,14,43,1)] z-100 flex border-t items-center justify-between">
      {items.map((item) => {
        const isSelected = pathname === item.path;
        const label = t(item.labelKey as 'explore' | 'search' | 'chat' | 'me');
        return (
          <Link
            className={cn(
              'flex w-full items-center justify-center gap-1',
              isSelected && 'text-txt-primary-normal'
            )}
            href={item.path}
            key={item.path}
          >
            <Image
              src={isSelected ? item.selectedIcon : item.icon}
              alt={label}
              width={48}
              height={48}
            />
            {response?.hide && <span>{label}</span>}
          </Link>
        );
      })}
    </div>
  );
}
