import React from "react";
import AddToPersonalizedButton from "./AddToPersonalizedButton.jsx";
import { buildSwiWidgetCatalogBySection } from "../../../utils/personalizedDashboard.js";
import { openSatPortal } from "../../../config/satPortal.js";

export default function SwiPersonalDashboardCatalog() {
  const sections = buildSwiWidgetCatalogBySection();

  return (
  <>
  </>
    // <section className="swi-panel swi-pd-catalog">
    //   <header className="swi-pd-catalog__head">
    //     <div>
    //       <h2 className="swi-user-section-title">Personal Dashboard widgets</h2>
    //       <p className="swi-user-section-desc">
    //         Add SWI charts and task panels to your SAT Personal Dashboard. Each
    //         widget opens the dashboard and saves your layout there.
    //       </p>
    //     </div>
    //     <button
    //       type="button"
    //       className="swi-btn swi-btn--ghost"
    //       onClick={() => openSatPortal("/personalized-dashboard")}
    //     >
    //       Open Personal Dashboard
    //     </button>
    //   </header>

    //   <div className="swi-pd-catalog__sections">
    //     {Object.entries(sections).map(([section, widgets]) => (
    //       <div key={section} className="swi-pd-catalog__section">
    //         <h3 className="swi-pd-catalog__section-title">{section}</h3>
    //         <ul className="swi-pd-catalog__list">
    //           {widgets.map((widget) => (
    //             <li key={widget.id} className="swi-pd-catalog__item">
    //               <div className="swi-pd-catalog__item-text">
    //                 <strong>{widget.label}</strong>
    //                 <span>{widget.description}</span>
    //               </div>
    //               <AddToPersonalizedButton
    //                 widgetId={widget.id}
    //                 label="Add"
    //                 className="swi-add-to-pd--compact"
    //               />
    //             </li>
    //           ))}
    //         </ul>
    //       </div>
    //     ))}
    //   </div>
    // </section>
  );
}
