import React from 'react';
import { Loader2 } from 'lucide-react';

/**
 * The on-demand door into the record, for before a note has been saved.
 *
 * Drawn in `mockups/practitioner/encounter.html` as "Update the record - Without the scribe add-on":
 *
 *     From your note
 *       Read what you have written so far and suggest what to add      [Check the note]
 *
 * THE DECK'S OWN CAPTION IS THE WHOLE REASON: *"the same extraction, run on demand - a typed note is
 * text too, so the practice without the add-on gets the same help from a button rather than
 * continuously. The add-on still earns its keep by writing the note in the first place."*
 *
 * IT DOES NOT REPLACE FIRING ON SAVE, and that distinction is settled. Spencer: *"on-demand-only means
 * the practitioners who most need it are the ones who never press the button."* Save still offers
 * unprompted; this is the door for the middle of a visit, and for a practice with no scribe at all.
 *
 * IT IS ABSENT UNTIL THERE IS SOMETHING TO READ. Offering to check an empty note is offering to do
 * nothing, and a control that reliably returns nothing is one people stop pressing.
 */

interface Props {
    /** Read what is written so far and offer what it describes. */
    onCheck: () => void;
    /** True while the note is being read. */
    checking: boolean;
}

export const CheckTheNote: React.FC<Props> = ({ onCheck, checking }) => (
    <section className="space-y-2">
        <h4 className="text-sm font-medium">From your note</h4>

        <div className="flex flex-wrap items-center justify-between gap-3 rounded-md border border-border px-2.5 py-2">
            <span className="text-sm text-muted-foreground">
                Read what you have written so far and suggest what to add
            </span>

            <button
                type="button"
                className="btn btn-blue-ghost-sm shrink-0"
                onClick={onCheck}
                disabled={checking}
            >
                {checking ? (
                    <span className="inline-flex items-center gap-1">
                        <Loader2 className="size-3 animate-spin" aria-hidden="true" />
                        Reading the note…
                    </span>
                ) : 'Check the note'}
            </button>
        </div>
        <p className="text-xs text-muted-foreground">Suggestions do not save the note or add record items.</p>
    </section>
);

export default CheckTheNote;