Perubahan belum disimpan

import { useState } from 'react';
import { Button, Dialog, FormField, Input } from '@divistant/circca-react';

// Perubahan belum disimpan: tiga pilihan seperti dialog simpan macOS — Buang di kiri, Tetap di sini (fokus awal) & Simpan draf di kanan.
export default function Example() {
  const [nomor, setNomor] = useState('PO/MEP/X/2026/0042');
  const [tersimpan, setTersimpan] = useState(nomor);
  const [tanya, setTanya] = useState(false);
  const [pesan, setPesan] = useState<string>();
  const kotor = nomor !== tersimpan;

  const pergi = () => {
    if (kotor) setTanya(true);
    else setPesan('Berpindah ke PT Divistant Teknologi Indonesia.');
  };

  return (
    <div className="grid max-w-sm gap-4">
      <FormField label="No. PO customer" helperText={kotor ? 'Ada perubahan yang belum disimpan.' : 'Ubah isian ini, lalu coba pindah perusahaan.'}>
        <Input value={nomor} onChange={e => setNomor(e.target.value)} />
      </FormField>
      <div>
        <Button onClick={pergi}>Pindah ke Divistant</Button>
      </div>
      {pesan && <p className="type-callout-default text-muted">{pesan}</p>}
      <Dialog
        open={tanya}
        onOpenChange={setTanya}
        alert
        size="md"
        title="Simpan perubahan PO-2026-0146?"
        subtitle="Perubahan yang belum disimpan akan hilang bila Anda pindah perusahaan sekarang."
        footer={
          <>
            <Button
              variant="ghost"
              className="mr-auto"
              onClick={() => {
                setNomor(tersimpan);
                setTanya(false);
                setPesan('Perubahan dibuang. Berpindah ke PT Divistant Teknologi Indonesia.');
              }}
            >
              Buang perubahan
            </Button>
            <Dialog.Close asChild>
              <Button>Tetap di sini</Button>
            </Dialog.Close>
            <Button
              variant="primary"
              onClick={() => {
                setTersimpan(nomor);
                setTanya(false);
                setPesan('Draf disimpan. Berpindah ke PT Divistant Teknologi Indonesia.');
              }}
            >
              Simpan draf
            </Button>
          </>
        }
      />
    </div>
  );
}