"use client";

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

const TabBar = () => {
  const router = useRouter();

  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">
        <button
          type="button"
          onClick={() => router.push("/createRequest")}
          className="flex flex-col items-center gap-1 text-[#90D2F9]"
        >
          <FaHome size={20} />
        </button>
        <button
          type="button"
          onClick={() => router.push("/historyRequest")}
          className="flex flex-col items-center gap-1 text-[#90D2F9]"
        >
          <FaClock size={20} />
        </button>
        <button
          type="button"
          className="flex flex-col items-center gap-1 text-[#90D2F9]"
        >
          <FaNewspaper size={20} />
        </button>
        <button
          type="button"
          onClick={() => router.push("/ProfilePage")}
          className="flex flex-col items-center gap-1 text-[#90D2F9]"
        >
          <FaCog size={20} />
        </button>
      </div>
    </nav>
  );
};

export default TabBar;