"use client";
import Image from "next/image";
import { useEffect, useState } from "react";
import apis, { BUCKET_ROOT } from "@/utils/apis";
import { useGlobalContext } from "@/context/Provider";
import { useRouter } from "next/navigation";

interface FoodCategoriesProps {
  selectedCategoryId: string | null;
}

const CategoryCard = ({ image, title, onSelect }: any) => (
  <div
    className="min-w-[250px] flex-shrink-0 rounded-lg cursor-pointer overflow-hidden bg-white mr-4 shadow-lg"
    onClick={() => onSelect(title)}
  >
    <div className="h-40 w-full relative">
      <Image
        src={image}
        alt={title}
        fill
        className="object-cover rounded-t-lg"
      />
    </div>
    <div className="p-3">
      <h3 className="font-bold text-sm">{title}</h3>
    </div>
  </div>
);

const FoodCategories: React.FC<FoodCategoriesProps> = ({ selectedCategoryId }) => {
  const { categoryList } = useGlobalContext();
  const [filteredCategories, setFilteredCategories] = useState<any[]>([]);
  const router = useRouter();

  useEffect(() => {
    if (selectedCategoryId && categoryList?.length > 0) {
      const filtered = categoryList.filter(
        (item: any) => item.category_parent_id === selectedCategoryId
      );
      setFilteredCategories(filtered);
    } else {
      setFilteredCategories(categoryList || []);
    }
  }, [selectedCategoryId, categoryList]);

  const handleSelect = (data: any) => {
    router.push(`/search?type=category&search=${data}`);
  };

  return (
    <div className="max-w-7xl mx-auto py-8 px-4">
      <div className="mb-8">
        <div className="flex items-center justify-center gap-2 mb-2">
          <h2 className="font-bold mb-2 text-h4 sm:text-h3 md:text-h2 lg:text-h1">
            <span className="text-primary">Explore</span> Categories
          </h2>
          <span className="text-h4 sm:text-h3 md:text-h2 lg:text-h1">🤩</span>
        </div>
        <p className="text-center text-gray-600 text-p2 sm:text-p1 md:text-h6 lg:text-h5">
          Discover Delicious Choices: Browse by Category
        </p>
      </div>

      <div>
        <div
          className="flex flex-row flex-wrap gap-10 pb-4 px-6 snap-x justify-center mx-auto"
          style={{ scrollbarWidth: "none", msOverflowStyle: "none" }}
        >
          {filteredCategories?.length > 0 &&
            filteredCategories.map((item: any) => (
              <CategoryCard
                key={item._id}
                image={BUCKET_ROOT + item.category_image}
                title={item.category_name}
                onSelect={handleSelect}
              />
            ))}
        </div>
      </div>
    </div>
  );
};

export default FoodCategories;