import { ADDRESS_SUFFIX } from "../../utils/practiceAddress";
import { OverlayActions } from "../ui/overlay-actions";
import "./PracticeAddress.css";

type PracticeAddressConfirmProps = {
  label: string;
  busy?: boolean;
  onEdit: () => void;
  onSave: () => void;
};

// The exact permanent address, confirmed before anything is claimed.
const PracticeAddressConfirm = ({ label, busy, onEdit, onSave }: PracticeAddressConfirmProps) => (
  <div className="space-y-4">
    <div className="text-sm text-muted-foreground">Your practice web address will be:</div>
    {/* The same read-only field the saved address sits in, as the deck draws both. */}
    <div className="practice-address__held practice-address__final">{label}{ADDRESS_SUFFIX}</div>
    <div className="ak-field-help">
      Check the spelling carefully. Once saved, this address cannot be renamed. Changing your practice name later will
      not change it.
    </div>
    <OverlayActions className="flex flex-wrap justify-end gap-3">
      {/* Small buttons, both of them: a row never mixes sizes. */}
      <button type="button" className="btn btn-amber-sm" onClick={onEdit} disabled={busy}>
        Edit address
      </button>
      <button type="button" className={`btn btn-green-sm${busy ? " btn-busy" : ""}`} onClick={onSave} disabled={busy}>
        Save address &amp; continue
      </button>
    </OverlayActions>
  </div>
);

export default PracticeAddressConfirm;