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="mt-8 flex flex-col gap-4">
      <div className="flex items-baseline gap-2.5">
        <h6 className="m-0 text-xs font-semibold tracking-wide text-fg-muted uppercase">
          {group.name}
        </h6>
        <div className="pn-hr" />
      </div>
      <div className="pn-bento gap-4">
        {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>
  );
}