// app/tabs/layout.tsx
"use client";

import Link from "next/link";
import { ReactNode } from "react";
import { usePathname } from "next/navigation";
import clsx from "clsx";
import { GoHomeFill } from "react-icons/go";
import { HiViewGrid } from "react-icons/hi";
import { FaBookmark } from "react-icons/fa";
import { HiCog6Tooth } from "react-icons/hi2";

const tabs = [
  { name: "Home", href: "/home", component: <GoHomeFill size={30} /> },
  {
    name: "Categories",
    href: "/categories",
    component: <HiViewGrid size={30} />,
  },
  { name: "Bookmark", href: "/bookmark", component: <FaBookmark size={23} /> },
  { name: "Settings", href: "/settings", component: <HiCog6Tooth size={30} /> },
];

export default function TabsLayout({ children }: { children: ReactNode }) {
  const pathname = usePathname();

  return (
    <div className="min-h-screen flex flex-col">
      <main className="flex-1">{children}</main>

      <nav className="h-[70px] w-full flex justify-around items-center border-t border-t-neutral-400 p-4 rounded-t-4xl bg-white fixed bottom-0">
        {tabs.map((tab) => (
          <Link
            key={tab.name}
            href={tab.href}
            className={clsx(
              "text-center text-sm font-medium",
              pathname === tab.href ? "text-blue-600" : "text-gray-500"
            )}
          >
            {tab.component}
          </Link>
        ))}
      </nav>
    </div>
  );
}