Diff text

import { useState, type ReactNode } from "react"
import { Button } from "@/components/ui/button"
import { DiffText } from "@/components/ui/diff-text"

function Panel({ title, context, className = "max-w-md", children }: { title: string; context: string; className?: string; children: ReactNode }) {
  return (
    <section className={`grid w-full gap-5 rounded-overlay border border-border bg-background p-6 shadow-resting max-sm:p-4 ${className}`}>
      <div className="grid gap-1">
        <p className="font-medium">{title}</p>
        <p className="text-sm text-muted-foreground">{context}</p>
      </div>
      {children}
    </section>
  );
}

const drafts = [
  "Thanks for reaching out about the late invoice. We have looked into it and the payment failed because the card on file expired last month.",
  "Thanks for flagging the late invoice. The payment failed because the card on file expired last month.",
  "Thanks for flagging the invoice: the card on file expired, so the payment failed.",
];

export function DiffTextDemo() {
  const [step, setStep] = useState(0);
  return (
    <Panel title="Reply draft" context="Each rewrite plays out in place, then settles." className="max-w-lg">
      <p className="leading-relaxed">
        <DiffText value={drafts[step]} />
      </p>
      <div className="flex flex-wrap gap-2">
        <Button size="sm" onClick={() => setStep((step + 1) % drafts.length)}>
          {step === drafts.length - 1 ? "Back to the original" : "Make it shorter"}
        </Button>
      </div>
      <div className="grid gap-1.5 border-t border-border pt-4">
        <p className="text-xs text-muted-foreground">Review mode keeps the marks</p>
        <p className="text-sm leading-relaxed">
          <DiffText keep previous={drafts[0]} value={drafts[1]} />
        </p>
      </div>
    </Panel>
  );
}