import type { CampaignWorkspaceSection } from "../types";
import ModuleSubnav, { type ModuleSubnavGroup } from "./ModuleSubnav";

const campaignSubnav: ModuleSubnavGroup<CampaignWorkspaceSection>[] = [
  {
    items: [{ id: "overview", label: "Overview", primary: true }]
  },
  {
    title: "CAMPAIGN",
    items: [
      { id: "fields", label: "Fields" },
      { id: "files", label: "Attachments" },
      { id: "recipients", label: "Sender & Recipients" },
      { id: "recipient-data", label: "Recipient data" },
      { id: "template", label: "Template" }
    ]
  },
  {
    title: "SETTINGS",
    items: [
      { id: "mail-settings", label: "Server settings" },
      { id: "global-settings", label: "Policies" }
    ]
  },
  {
    title: "SEND",
    items: [
      { id: "review", label: "Workflow preview" },
      { id: "send", label: "Review & Send" }
    ]
  },
  {
    title: "REPORT",
    items: [
      { id: "report", label: "Report" },
      { id: "audit", label: "Audit log" }
    ]
  },
  {
    title: "ADVANCED",
    items: [{ id: "json", label: "JSON", subtle: true }]
  }
];

export default function SectionSidebar({
  active,
  onSelect
}: {
  active: CampaignWorkspaceSection;
  onSelect: (section: CampaignWorkspaceSection) => void;
}) {
  return <ModuleSubnav active={active} groups={campaignSubnav} onSelect={onSelect} />;
}