'use client';
import React from 'react';
import { menuData } from '../menuData'; // Đảm bảo file này export menuData
import Link from 'next/link';
import { FaCaretDown } from 'react-icons/fa';

const HeaderBottomRight: React.FC = () => {
  // 1. Lọc các ID danh mục hiển thị trên Header (Cấp 1)
  const allowedIds = ['407', '408', '3300', '281', '3431', '410', '3403'];

  // 2. Hàm lấy Icon và Title dựa theo ID
  const getCategoryInfo = (id: string) => {
    switch (id) {
      case '407':
        return { icon: 'sprite-laptop', title: 'Laptop' };
      case '408':
        return { icon: 'sprite-PC', title: 'PC' };
      case '3300':
        return { icon: 'sprite-PC', title: 'PC AI' };
      case '281':
        return { icon: 'sprite-manhinh', title: 'Màn hình' };
      case '3431':
        return { icon: 'sprite-linhkien', title: 'Linh kiện PC' };
      case '410':
        return { icon: 'sprite-phimchuot', title: 'Phím chuột ghế gear' };
      case '3403':
        return { icon: 'sprite-thietbi', title: 'Thiết bị văn phòng' };
      default:
        return { icon: '', title: '' };
    }
  };

  // Lấy danh sách all_category từ menuData[0]
  const allCategories = menuData[0]?.product?.all_category || [];

  return (
    <>
      {allCategories.map((item) => {
        if (!allowedIds.includes(item.id)) return null;

        const info = getCategoryInfo(item.id);

        return (
          <li key={item.id} className="item-category-header" data-id={item.id}>
            <Link href={item.id === '408' ? '#' : item.url} className="flex items-center gap-2">
              <i className={`sprite-more ${info.icon}`}></i>
              <span className="title-header-bottom">{info.title}</span>
              <FaCaretDown size="16" className="text-white" />
            </Link>

            <div className="list-category-child flex justify-between">
              <div className="box-left">
                <ul className="grid grid-cols-4 gap-5">
                  {item.isParent === '1' && (
                    <>
                      {item.id === '408'
                        ? allCategories
                            .filter((c) => ['408', '3201', '1829', '3300', '3691'].includes(c.id))
                            .map((child1) => (
                              <li key={child1.id} className="sub-menu">
                                <Link href={child1.url} className="child-lv2 block font-bold">
                                  {child1.title}
                                </Link>
                                {child1.isParent === '1' && (
                                  <div className="list-child-lv3 mt-10 flex flex-col">
                                    {child1.children?.map((child2) => (
                                      <Link key={child2.id} href={child2.url} className="child-lv3">
                                        {child2.title}
                                      </Link>
                                    ))}
                                  </div>
                                )}
                              </li>
                            ))
                        : item.children?.map((_item_child) => (
                            <li key={_item_child.id} className="sub-menu">
                              <Link href={_item_child.url} className="child-lv2 block font-bold">
                                {_item_child.title}
                              </Link>
                              {_item_child.isParent === '1' && (
                                <div className="list-child-lv3 mt-10 flex flex-col">
                                  {_item_child.children?.map((_item_childtwo) => (
                                    <Link
                                      key={_item_childtwo.id}
                                      href={_item_childtwo.url}
                                      className="child-lv3"
                                    >
                                      {_item_childtwo.title}
                                    </Link>
                                  ))}
                                </div>
                              )}
                            </li>
                          ))}
                    </>
                  )}
                </ul>
              </div>

              <div className={`box-right flex-1 product-category-${item.id}`}>
                <p className="title font-bold">Bán chạy nhất</p>
                <div className="list-product-bestsale" id={`product-category-${item.id}`}></div>
              </div>
            </div>
          </li>
        );
      })}
    </>
  );
};

export default HeaderBottomRight;