"use client";

import { useEffect, useState } from "react";
import Slider from "react-slick";
import {
  LuSparkles,
  LuStethoscope,
  LuHeartPulse,
  LuBaby,
  LuPill,
  LuHandHeart,
  LuPillBottle,
} from "react-icons/lu";

const categoryIcons = {
  LuSparkles,
  LuStethoscope,
  LuHeartPulse,
  LuBaby,
  LuPill,
  LuHandHeart,
  LuPillBottle,
};

type Category = {
  id: number;
  name: string;
  slug: string;
  icon: string;
  status: "active" | "inactive";
  sort_order: number;
  product_count: number;
};

export default function CatSec() {
  const [categories, setCategories] = useState<Category[]>([]);
  const [loading, setLoading] = useState(true);

  const settings = {
    dots: false,
    infinite: true,
    speed: 500,
    slidesToShow: 5,
    slidesToScroll: 1,
    arrows: true,

    responsive: [
      {
        breakpoint: 1280,
        settings: {
          slidesToShow: 4,
        },
      },
      {
        breakpoint: 1024,
        settings: {
          slidesToShow: 3,
        },
      },
      {
        breakpoint: 768,
        settings: {
          slidesToShow: 2,
        },
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
        },
      },
    ],
  };

  useEffect(() => {
    async function fetchCategories() {
      try {
        const response = await fetch(
          "http://localhost:5000/api/categories"
        );

        if (!response.ok) {
          throw new Error("Failed to fetch categories");
        }

        const data: Category[] = await response.json();
        console.log("CATEGORIES FROM API:", data);

        setCategories(data);
      } catch (error) {
        console.error("Failed to fetch categories:", error);
      } finally {
        setLoading(false);
      }
    }

    fetchCategories();
  }, []);

  return (
    <section className="py-10">
      <div className="max-w-7xl mx-auto">

        {loading ? (
          <div className="flex justify-center py-10">
            <p className="text-sm text-gray-400">
              Loading categories...
            </p>
          </div>
        ) : categories.length === 0 ? (
          <div className="flex justify-center py-10">
            <p className="text-sm text-gray-400">
              No categories available.
            </p>
          </div>
        ) : (
          <Slider {...settings}>
            {categories.map((category) => {
              const Icon =
                categoryIcons[
                  category.icon as keyof typeof categoryIcons
                ] || LuPill;

              return (
                <div className="px-2" key={category.id}>
                  <div className="relative bg-white rounded-xl border border-[#EEEEEE] p-8 text-center">

                    <div className="flex justify-center mb-5">
                      <Icon
                        size={48}
                        style={{ strokeWidth: 1 }}
                        className="text-[#B570D4]"
                      />
                    </div>

                    <h3 className="font-semibold text-gray-700">
                      {category.name}
                    </h3>

                    <p className="mt-2 text-gray-400">
                      {category.product_count} Items
                    </p>

                  </div>
                </div>
              );
            })}
          </Slider>
        )}

      </div>
    </section>
  );
}