"use client";

import React from "react";
import { FaClock, FaNewspaper, FaHome, FaCog } from "react-icons/fa";
import { useRouter, usePathname } from "next/navigation";
import { useAuth } from "../context/AuthContext";

const TabBar = () => {
  const router = useRouter();
  const pathname = usePathname();
  const { user } = useAuth();

  if (!user) return null; // не показываем таббар, если не залогинен

  // маршруты по ролям
  const routesByRole = {
    user: [
      { key: "home", icon: FaHome, href: "/createRequest" },
      { key: "history", icon: FaClock, href: "/historyRequest" },
      { key: "news", icon: FaNewspaper, href: "/news" },
      { key: "profile", icon: FaCog, href: "/ProfilePage" },
    ],
    volunteer: [
      { key: "home", icon: FaHome, href: "/mainValounter" },
      { key: "history", icon: FaClock, href: "/valounterHistoryRequest" },
      { key: "news", icon: FaNewspaper, href: "/volunteer/news" },
      { key: "profile", icon: FaCog, href: "/volunterProfile" },
    ],
    moderator: [
      { key: "queue", icon: FaHome, href: "/moderator/home" },
      { key: "history", icon: FaClock, href: "/moderator/history" },
      { key: "news", icon: FaNewspaper, href: "/moderator/news" },
      { key: "profile", icon: FaCog, href: "/moderator/profile" },
    ],
  };

  const tabs = routesByRole[user.role] || [];

  return (
    <nav className="fixed bottom-0 left-0 right-0 flex justify-center">
      <div className="w-full max-w-md bg-white rounded-t-xl flex items-center justify-around py-4 shadow-inner">
        {tabs.map((tab) => {
          const Icon = tab.icon;
          const active = pathname === tab.href;
          return (
            <button
              key={tab.key}
              type="button"
              onClick={() => router.push(tab.href)}
              className={`flex flex-col items-center gap-1 ${
                active ? "text-[#90D2F9]" : "text-gray-400"
              }`}
            >
              <Icon size={20} />
            </button>
          );
        })}
      </div>
    </nav>
  );
};

export default TabBar;