app/frontend/src/components/ContractsSection.tsx

import { useState } from "react";
import type { ContractMap } from "../content/types";

interface ContractsSectionProps {
  contracts: ContractMap;
}

const contractLabels: Array<{ key: keyof ContractMap; label: string; endpoint: string }> = [
  { key: "voice_registry", label: "Voice registry", endpoint: "/api/contracts/voice_registry?download=true" },
  {
    key: "route_model_matrix",
    label: "Route/model matrix",
    endpoint: "/api/contracts/route_model_matrix?download=true",
  },
  {
    key: "seed_voice_library",
    label: "Seed voice library",
    endpoint: "/api/contracts/seed_voice_library?download=true",
  },
  { key: "provider_config", label: "Provider config", endpoint: "/api/contracts/provider_config?download=true" },
];

export function ContractsSection({ contracts }: ContractsSectionProps) {
  const [activeKey, setActiveKey] = useState<keyof ContractMap>("voice_registry");

  return (
    <div className="contracts-layout">
      <div className="contract-tabs" role="tablist" aria-label="Data contracts">
        {contractLabels.map((item) => (
          <button
            key={item.key}
            type="button"
            className={item.key === activeKey ? "contract-tab active" : "contract-tab"}
            onClick={() => setActiveKey(item.key)}
          >
            {item.label}
          </button>
        ))}
      </div>
      <div className="contract-viewer">
        <div className="contract-meta">
          <strong>{contractLabels.find((item) => item.key === activeKey)?.label}</strong>
          <a href={contractLabels.find((item) => item.key === activeKey)?.endpoint}>Download JSON</a>
        </div>
        <pre>{JSON.stringify(contracts[activeKey], null, 2)}</pre>
      </div>
    </div>
  );
}