'use client';
import React from 'react';
import { menuData } from '../../other/Header/menuData';
import ItemCategory from './ItemCategory';
import { InfoCategory } from '@/types';

const renderFeaturedCategories = (categories: InfoCategory[]) => {
  return categories.map((cat, idx) => (
    <React.Fragment key={idx}>
      {cat.is_featured == '1' && <ItemCategory item={cat} />}
      {cat.children && renderFeaturedCategories(cat.children)}
    </React.Fragment>
  ));
};

const CategoryFeature = () => {
  return (
    <div className="box-category-outstanding boder-radius-10">
      <div className="title-box">
        <h2 className="title title-box font-[600]">Danh mục nổi bật</h2>
      </div>
      <div className="list-category-outstanding grid grid-cols-10 gap-3">
        {renderFeaturedCategories(menuData[0].product.all_category)}
      </div>
    </div>
  );
};

export default CategoryFeature;