import React, { useState } from "react";
import { useHomeData } from "@/context/helpers/Home";
import ProductCard from "./ProductCard";
import { cn } from "@/lib/utils";
import { useTranslation } from "react-i18next";

export default function FeaturedProducts() {
  const { featuredProducts, bestSellers, onSaleProducts } = useHomeData();
  const [activeTab, setActiveTab] = useState("featured");
  const { t } = useTranslation("home");

  const tabs = [
    {
      id: "featured",
      label: t("featuredProducts"),
      data: featuredProducts?.productList || [],
    },
    {
      id: "bestSellers",
      label: t("bestSellers"),
      data: bestSellers?.productList || [],
    },
    {
      id: "flashDeals",
      label: t("flashDeals"),
      data: onSaleProducts?.productList || [],
    },
  ];

  const activeTabData = tabs.find((tab) => tab.id === activeTab);
  const activeData = activeTabData?.data || [];
  return (
    <section className="py-12 bg-white">
      <div className="container max-w-[1200px] mx-auto px-4">
        {/* Header with Tabs */}
        <div className="flex flex-col md:flex-row justify-between items-center mb-8 pb-4">
          <h2 className="text-2xl font-bold text-gray-900 mb-4 md:mb-0">
            {activeTabData?.label}
          </h2>

          <div className="flex flex-wrap gap-6">
            {tabs.map((tab) => (
              <button
                key={tab.id}
                onClick={() => setActiveTab(tab.id)}
                className={cn(
                  "text-sm font-medium transition-colors cursor-pointer relative pb-2",
                  activeTab === tab.id
                    ? "text-primary after:content-[''] after:absolute after:bottom-[0px] after:left-0 after:w-full after:h-[2px] after:bg-mainColor"
                    : "text-gray-500 hover:text-gray-900"
                )}
              >
                {tab.label}
              </button>
            ))}
          </div>
        </div>

        {/* Product Grid */}
        {activeData.length > 0 ? (
          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-6">
            {activeData.slice(0, 10).map((product) => (
              <ProductCard
                key={product.id || product.productId}
                product={product}
              />
            ))}
          </div>
        ) : (
          <div className="text-center py-12 text-gray-500">
            {t("noProductsFound")}
          </div>
        )}
      </div>
    </section>
  );
}