import React from "react";
import { createRoot } from "react-dom/client";
import { MemoryReviewWidget } from "../../src/widgets/MemoryReviewWidget";
import "../../src/index.css";

const card = { family: "sql_rule", subject: "Join orders within the same financial year",
  detail: "Join order lines using both order_id and financial_year. The order number repeats across years.",
  scope: "Sales reporting", rationale: "Confirmed during review of annual totals.",
  question: "What is the total value of shipped orders?", sql: "", concepts: ["Order grain"],
  dependencies: [{ database: "warehouse", schema_name: "sales", table: "orders", column: "financial_year" }],
  links: [] };
const descriptor = { id: "review", widget: "memory-review", reserved: [],
  summary: { summary_id: "fixture", items: [
    { id: "rule", card, reason: "Preserve the approved join correction.", source_seqs: [12], before: null, target_id: null },
    { id: "solved", card: { ...card, family: "solved_question", subject: "Shipped orders by year",
      sql: "SELECT financial_year, SUM(total) FROM sales.orders GROUP BY financial_year" },
      reason: "Keep the approved solution as an example.", source_seqs: [18], before: null, target_id: null },
  ] } };
createRoot(document.getElementById("root")!).render(<main className="mx-auto max-w-3xl p-4">
  <MemoryReviewWidget descriptor={descriptor} onRespond={response => {
    document.querySelector("#response")!.textContent = JSON.stringify(response);
  }} /><output id="response" /></main>);