import { Trans } from "@lingui/react/macro";
import { useAuth } from "../hooks/useAuth.ts";
import { FEED_TABS, type FeedTab } from "../config/feedTabs.ts";
import { useTabParam } from "../hooks/useTabParam.ts";
import { TabBar } from "./TabBar.tsx";

export function FeedTabBar() {
  const { user } = useAuth();
  const [tab, setTab] = useTabParam<FeedTab>(FEED_TABS, "hot");

  const tabs = [
    { key: "hot" as FeedTab, label: <Trans>Hot</Trans> },
    { key: "new" as FeedTab, label: <Trans>New</Trans> },
    { key: "journal" as FeedTab, label: <Trans>Journal</Trans> },
    ...(user
      ? [{ key: "followed" as FeedTab, label: <Trans>Followed</Trans> }]
      : []),
  ];

  return (
    <TabBar
      tabs={tabs}
      activeTab={tab}
      onChange={setTab}
    />
  );
}