"use client";

import { useApp } from "@/context/AppContext";
import { getFilteredItems, TABS } from "@/lib/utils";
import type { TabKey } from "@/lib/types";

export default function TabBar() {
    const { data, activeTab, setActiveTab, search, selectedSubgraph } =
        useApp();

    if (!data) return null;

    return (
        <div className="flex border-b border-border bg-surface">
            {TABS.map(tab => {
                const count = getFilteredItems(
                    data,
                    tab.key,
                    search,
                    selectedSubgraph
                ).length;
                const isActive = activeTab === tab.key;

                return (
                    <button
                        key={tab.key}
                        onClick={() => setActiveTab(tab.key as TabKey)}
                        className={`px-5 py-3 text-sm font-medium border-b-2 cursor-pointer transition-colors ${
                            isActive
                                ? "border-b-accent text-text-primary"
                                : "border-b-transparent text-text-secondary hover:text-text-primary"
                        }`}
                    >
                        {tab.label}
                        <span
                            className={`ml-2 text-xs font-normal px-1.5 py-0.5 rounded ${
                                isActive
                                    ? "bg-accent/15 text-accent"
                                    : "bg-raised text-text-secondary"
                            }`}
                        >
                            {count}
                        </span>
                    </button>
                );
            })}
        </div>
    );
}