Digest email

"use client"

import * as React from "react"
import { DigestEmailPreview, renderDigestEmail, type DigestEmailOptions } from "@/components/candor/digest-email"
import type { DigestData } from "@/components/candor/digest"
import { Button } from "@/components/candor/ui/button"

const planner = { kind: "agent" as const, agent: { id: "planner", name: "Planning agent", role: "planner" } }

const digest: DigestData = {
  title: "Your week",
  period: "6 to 12 November",
  needsYou: [{ id: "n1", title: "Approve the supplier import", detail: "Waiting since Tuesday", href: "https://app.example.com/review/n1" }],
  health: [
    { id: "h1", label: "Runs finished", value: 128, points: [96, 104, 99, 115, 121, 128], change: { value: 0.12, format: "percent", period: "since last week" } },
    { id: "h2", label: "Reruns", value: 5, points: [7, 5], change: { value: -2, period: "since last week" } },
    { id: "h3", label: "Hours saved", value: null, missing: "Not measured until the timer is on.", points: [] },
  ],
  done: [
    { id: "d1", title: "Drafted the quarterly summary", by: planner, href: "https://app.example.com/docs/summary" },
    { id: "d2", title: "Signed off the plan", by: { kind: "person", name: "Dana Reyes" } },
  ],
  notes: [{ id: "g1", name: "Northwind", notes: [{ id: "x1", text: "The supplier's file arrived a day late; nothing downstream moved.", by: planner }] }],
}

const options: DigestEmailOptions = {
  brand: "Keel",
  why: "You get this every Monday. Change it in Settings, Notifications.",
  link: { label: "Open your week", href: "https://app.example.com/week" },
}

export default function Example() {
  const [frame, setFrame] = React.useState(false)
  // renderDigestEmail's string goes to your mailer, from a route handler or a worker. DigestEmailPreview shows the same
  // email inline; the iframe shows the exact document.
  const html = React.useMemo(() => renderDigestEmail(digest, options), [])
  return (
    <div className="flex max-w-xl flex-col gap-3">
      <DigestEmailPreview digest={digest} {...options} className="border" />
      <Button size="sm" variant="outline" className="self-start" aria-expanded={frame} onClick={() => setFrame((o) => !o)}>
        {frame ? "Hide the HTML document" : "Show the HTML document"}
      </Button>
      {frame && <iframe title="Email document" srcDoc={html} sandbox="" className="block h-[30rem] w-full rounded-xl border bg-white" />}
    </div>
  )
}