Correction offer

"use client"

import * as React from "react"
import { Field } from "@/components/candor/ui/field"
import { Input } from "@/components/candor/ui/input"
import { CorrectionOffer } from "@/components/candor/ui/correction-offer"

const typos: Record<string, string> = { "gmial.com": "gmail.com", "gamil.com": "gmail.com", "outlok.com": "outlook.com" }

// The app's check runs when the person leaves the field; the offer stays mounted and gets a suggestion when there is
// one. Nothing changes until the person presses Use.
export default function Example() {
  const [email, setEmail] = React.useState("ada@gmial.com")
  const [checked, setChecked] = React.useState<string | null>(null)
  const [dismissed, setDismissed] = React.useState<string | null>(null)
  const domain = checked?.split("@")[1] ?? ""
  const fixed = Object.hasOwn(typos, domain) ? `${checked?.split("@")[0]}@${typos[domain]}` : null
  const suggestion = fixed && checked === email && dismissed !== email ? fixed : null
  return (
    <div className="flex w-full max-w-sm flex-col gap-3">
      <Field label="Email" id="offer-email">
        <Input type="email" value={email} onChange={(e) => setEmail(e.target.value)} onBlur={() => setChecked(email)} />
      </Field>
      <CorrectionOffer
        original={email}
        suggestion={suggestion}
        fieldId="offer-email"
        onAccept={() => suggestion && setEmail(suggestion)}
        onDismiss={() => setDismissed(email)}
      />
    </div>
  )
}