import React, { useEffect, useState } from 'react';
import {fetchProductManagementSolr} from '../hooks/useCategoryManagement';
import NextImage from 'next/image';
import Link from "next/link"
import router from 'next/router';
import { createSlug } from '@/core/utils/slug'

const CategoryDynamic =    () => {
  const [promoItems, setPromoItems] = useState([]);
  useEffect(() => {
    const loadPromo = async () => {
      
      try {
        const items = await fetchProductManagementSolr();
        setPromoItems(items);

      } catch (loadError) {
        // console.error("Error loading promo items:", loadError)
      }
    }

  
      loadPromo()

  },[]);
 
  const image = 'https://erp.indoteknik.com/api/image/product.template/image_256/544371?ratio=square'
  const handleLink = (name, id) => {
    return `/shop/category/${name}/${id}`;
};

  console.log("promoItems",promoItems)

  return (
    <div>
      <div className='font-semibold sm:text-h-lg mb-6 px-4 sm:px-0'>Kategori Pilihan</div>
      {/* Render category data */}
      {promoItems && promoItems.map((category) => (
        <div key={category.id}>
          <div className='bagian-judul flex flex-row justify-start items-center gap-3'>
              <div className='font-semibold sm:text-h-lg mr-2'>{category.name}</div>
              <p className='text-gray_r-10 text-sm'>999 rb+ Produk tersedia</p>
            <Link href={createSlug('/shop/category/', category?.name, category?.id)} className="!text-red-500 font-semibold">Lihat Semua</Link>
          </div>
          <p>
            Kategori level 1 : {category.name} - ID level 1 : {category.id}
            <NextImage
                src={category.image? category.image : image}
                alt={category.name}
                width={90}
                height={30}
              />
          </p>
          <div>
            {category.category_id2.map((index)=> (
              <div key={index.id}>
                  <p>
                    id LEVEL 2: {index.id_level_2} - Name LEVEL 2: {index.name}
                    <NextImage
                      src={index.image? index.image : image}
                      alt={index.name}
                      width={90}
                      height={30}
                    />
                    <div>
                      {index.child_frontend_id_i.map((x)=> (
                        <div key={x.id}>
                              <p>
                                id LEVEL 3: {x.id_level_3} - name LEVEL 3: {x.name}
                                <NextImage
                                  src={x.image? x.image : image}
                                  alt={x.name}
                                  width={90}
                                  height={30}
                                />
                              </p>
                          </div>
                        ))}
                    </div>
                  </p>
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}

export default CategoryDynamic;