"use client";

import React, { useMemo } from "react";
import { useTranslation } from "react-i18next";
import { cn } from "@/lib/utils";

export type ReelsTab = "for_you" | "following" | "saved" | "near_me";

const TAB_IDS: ReelsTab[] = ["for_you", "following", "saved", "near_me"];

interface ReelsTabBarProps {
  activeTab: ReelsTab;
  onChange: (tab: ReelsTab) => void;
  className?: string;
}

export default function ReelsTabBar({
  activeTab,
  onChange,
  className,
}: ReelsTabBarProps) {
  const { t } = useTranslation("common");

  return (
    <div
      className={cn(
        "pointer-events-auto flex items-center justify-center gap-5",
        className
      )}
      role="tablist"
      aria-label={t("reels.tabListAria")}
    >
      {TAB_IDS.map((tabId) => {
        const isActive = tabId === activeTab;
        return (
          <button
            key={tabId}
            type="button"
            role="tab"
            aria-selected={isActive}
            onClick={() => onChange(tabId)}
            className={cn(
              "gentle-transition text-sm drop-shadow-[0_1px_3px_rgba(0,0,0,0.85)]",
              isActive
                ? "font-bold text-white"
                : "font-semibold text-white/60 active:text-white/85"
            )}
          >
            {t(`reels.tabs.${tabId}`)}
          </button>
        );
      })}
    </div>
  );
}

export function parseReelsTab(value: string | null): ReelsTab {
  if (
    value === "following" ||
    value === "saved" ||
    value === "near_me"
  ) {
    return value;
  }
  return "for_you";
}
