'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';

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

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

  return (
    <div className="h-20 z-100 flex items-center justify-between">
      {items.map((item) => {
        const isSelected = pathname === item.path;
        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={item.label}
              width={48}
              height={48}
            />
            {response?.hide && <span>{item.label}</span>}
          </Link>
        );
      })}
    </div>
  );
}
