import { tabs } from "../data/mockData";
import IconBox from "./IconBox";

export default function BottomTabs({ activeTab, setActiveTab }) {
  return (
    <nav className="grid grid-cols-4 border-t border-line px-2 py-2">
      {tabs.map((tab) => (
        <button
          key={tab.id}
          className={`relative flex flex-col items-center gap-1 rounded-sm px-2 py-2 text-[12px] font-bold transition ${
            activeTab === tab.id ? " text-primary" : "text-muted hover:bg-surface2"
          }`}
          onClick={() => setActiveTab(tab.id)}
        >
          <IconBox icon={tab.icon} small active={activeTab === tab.id} />
          <span>{tab.label}</span>
        </button>
      ))}
    </nav>
  );
}
