"use client";

import type { Config } from "@/lib/config/schema";
import { useConfigSubscription } from "@/lib/ws/client";
import { GroupSection } from "./GroupSection";

export function Dashboard({ config: initialConfig }: { config: Config }) {
  const config = useConfigSubscription(initialConfig);

  return (
    <main className="mx-auto flex max-w-6xl flex-col gap-8 px-6 py-10">
      <header className="flex items-center justify-between">
        <h1 className="text-lg font-semibold text-fg">{config.settings.title}</h1>
      </header>
      {config.groups.map((group, groupIndex) => (
        <GroupSection key={group.name} group={group} groupIndex={groupIndex} />
      ))}
    </main>
  );
}