const SkeletonLine = ({ height = 50, width = "100%", className = "" }) => (
  <div
    className={`skeleton mb-2 ${className}`}
    style={{
      height,
      width,
    }}
  ></div>
);
export const MenuItemSkeleton = ({ hasSubmenu = false, submenuCount = 3 }) => {
    return (
    <li className="menu-item">
      <div className="menu-link d-flex align-items-center gap-2 ">
        {/* icon placeholder */}
        <SkeletonLine height={25} width="25px" className="rounded" />
        {/* text placeholder */}
        <SkeletonLine height={25} width="100%" />
      </div>

      {/* Submenu skeletons */}
      {hasSubmenu && (
        <ul className="menu-sub mt-1 ms-4">
          {[...Array(submenuCount)].map((_, idx) => (
            <li key={idx} className="menu-item">
              <div className="menu-link d-flex align-items-center gap-2">
                <SkeletonLine height={20} width="20px" className="rounded" />
                <SkeletonLine height={24} width="100px" />
              </div>
            </li>
          ))}
        </ul>
      )}
    </li>
  );
};