import type { RecipeTab } from "@batch-cooking/shared";
import { useTranslation } from "react-i18next";
import { AccountIcon, FavoriteIcon, HouseholdIcon, PublicIcon } from "../../layouts/nav-icons";
import "./recipes.scss";

/** Every functional tab, in display order, with its icon — reuses `AccountIcon`/`HouseholdIcon` from the sidebar's own icon set (see nav-icons.tsx) rather than a second "person"/"house" glyph. */
const TABS: Array<{ value: RecipeTab; Icon: () => JSX.Element }> = [
  { value: "favoris", Icon: FavoriteIcon },
  { value: "perso", Icon: AccountIcon },
  { value: "foyer", Icon: HouseholdIcon },
  { value: "publique", Icon: PublicIcon },
];

/**
 * Catalog tab bar — Favoris / Perso / Foyer / Publique, plus a disabled
 * placeholder for external sources (not built yet, see the plan's "hors
 * scope" note) so the eventual nav slot is visible without being
 * functional. No "toutes" tab: every recipe a viewer can see falls under
 * exactly one of perso/foyer/publique (its own visibility) — see
 * `recipe.service.ts`'s `listRecipes`.
 */
export function RecipeTabs({
  active,
  onChange,
}: {
  active: RecipeTab;
  onChange: (tab: RecipeTab) => void;
}) {
  const { t } = useTranslation();

  return (
    <div className="recipe-tabs">
      {TABS.map(({ value, Icon }) => (
        <button
          key={value}
          type="button"
          className={`recipe-tabs__tab${value === active ? " active" : ""}`}
          onClick={() => onChange(value)}
        >
          <Icon />
          {t(`recipes.tabs.${value}`)}
        </button>
      ))}
      <button
        type="button"
        className="recipe-tabs__tab placeholder"
        disabled
        title={t("recipes.tabs.sourcesSoonHint")}
      >
        {t("recipes.tabs.sourcesSoon")}
      </button>
    </div>
  );
}