'use client';

import { usePathname, useRouter } from 'next/navigation';
import { CalendarCheck, Home, User } from 'lucide-react';
import classNames from 'classnames';

export default function BottomMenuComponent() {
  const pathname = usePathname();
  const router = useRouter();

  const menus = [
    {
      label: 'Beranda',
      icon: (active) => <Home size={20} className={active ? 'text-blue-600' : 'text-gray-500'} />,
      path: '/beranda',
    },
    {
      label: 'Kehadiran',
      icon: (active) => <CalendarCheck size={20} className={active ? 'text-blue-600' : 'text-gray-500'} />,
      path: '/attendance',
    },
    {
      label: 'Profil',
      icon: (active) => <User size={20} className={active ? 'text-blue-600' : 'text-gray-500'} />,
      path: '/profile',
    },
  ];

  return (
    <div className="fixed bottom-0 left-0 right-0 z-40 bg-white border-t border-gray-200 shadow-md">
      <div className="flex justify-around items-center h-16">
        {menus.map((menu) => {
          const isActive = pathname === menu.path;

          return (
            <button
              key={menu.path}
              onClick={() => router.push(menu.path)}
              className={classNames(
                'flex flex-col items-center justify-center text-sm',
                isActive ? 'text-blue-600 font-semibold' : 'text-gray-500'
              )}
            >
              {menu.icon(isActive)}
              <span className="text-xs mt-1">{menu.label}</span>
              {isActive && <div className="w-1.5 h-1.5 bg-blue-600 rounded-full mt-1" />}
            </button>
          );
        })}
      </div>
    </div>
  );
}