import { Tabs } from "@/components/ui/tabs";
import RecommendedTabsList from "./Header";
import RecommendedTabsContent from "./Body";
import { useHomeData } from "@/context/helpers/Home";
import { useTranslation } from "react-i18next";
import { useMemo } from "react";

// Recommended products section with tabs
export default function Recommended() {
  const { t } = useTranslation("home");
  const { newProducts, featuredProducts, bestSellers, onSaleProducts } =
    useHomeData();

  // Map context data to tab structure
  const tabData = useMemo(() => {
    const tabs = [];

    if (featuredProducts?.productList?.length > 0) {
      tabs.push({
        id: featuredProducts.id || 1,
        type: featuredProducts.type || "featured",
        label: featuredProducts.label || "Featured Products",
        productList: featuredProducts.productList || [],
      });
    }

    if (newProducts?.productList?.length > 0) {
      tabs.push({
        id: newProducts.id || 2,
        type: newProducts.type || "new",
        label: newProducts.label || "New Products",
        productList: newProducts.productList || [],
      });
    }

    if (onSaleProducts?.productList?.length > 0) {
      tabs.push({
        id: onSaleProducts.id || 3,
        type: onSaleProducts.type || "sale",
        label: onSaleProducts.label || "Hot Deals",
        productList: onSaleProducts.productList || [],
      });
    }

    if (bestSellers?.productList?.length > 0) {
      tabs.push({
        id: bestSellers.id || 4,
        type: bestSellers.type || "bestseller",
        label: bestSellers.label || "Today's Deal",
        productList: bestSellers.productList || [],
      });
    }

    return tabs;
  }, [featuredProducts, newProducts, onSaleProducts, bestSellers]);

  // Don't render if no tabs available
  if (tabData.length === 0) {
    return null;
  }

  return (
    <section className="container max-w-screen-xl pb-8 mx-auto">
      {/* Section Header */}
      <header className="flex flex-col">
        <h2 className="h-6 mb-5 text-xl font-bold text-center">
          {t("recommended")}
        </h2>
      </header>

      <div>
        {/* Tabs */}
        <Tabs defaultValue={tabData[0].type} className="flex flex-col">
          {/* tab list */}
          <RecommendedTabsList tabs={tabData} />
          {/* Tabs Content */}
          <RecommendedTabsContent tabs={tabData} />
        </Tabs>
      </div>
    </section>
  );
}