pulsenode/components/layout/GroupSection.tsx

import type { Group } from "@/lib/config/schema";
import { widgetId } from "@/lib/config/widgets";
import { widgetRegistry } from "@/components/widgets/registry";

export function GroupSection({ group, groupIndex }: { group: Group; groupIndex: number }) {
  return (
    <section className="flex flex-col gap-3">
      <h2 className="text-xs font-semibold tracking-wide text-fg-muted uppercase">
        {group.name}
      </h2>
      <div className="grid grid-cols-[repeat(auto-fill,minmax(220px,1fr))] gap-3">
        {group.widgets.map((widget, index) => {
          const Component = widgetRegistry[widget.type];
          const id = widgetId(groupIndex, index);
          return <Component key={id} widget={widget as never} widgetId={id} />;
        })}
      </div>
    </section>
  );
}