RiskConfirmation

render() {
  const mode = signal("comfortable");
  const locked = signal(false);
  const active = signal(true);
  const open = signal(false);
  const acknowledged = signal(false);
  const feedback = signal("The example has not been removed.");
  return (
    <Stack align="start">
      <SegmentedControl
        id="reading-mode"
        label="Reading spacing"
        value={mode}
        disabled={locked}
        onValueChange={(next) => {
          mode.value = next;
        }}
        options={[
          { value: "comfortable", label: "Comfortable" },
          { value: "locked", label: "Automatic", disabled: true },
          { value: "compact", label: "Compact" },
        ]}
      />
      <Button
        variant="quiet"
        onClick={() => {
          locked.value = !locked.value;
        }}
      >
        Toggle selection lock
      </Button>
      <TextShimmer text="Reading the file content" active={active} />
      <TextShimmer active={active} className="compound-shimmer">
        <TextShimmer text="Checking" />
        {" · "}
        <TextShimmer text="src/components" />
      </TextShimmer>
      <Button
        variant="quiet"
        onClick={() => {
          active.value = !active.value;
        }}
      >
        Toggle active state
      </Button>
      <Button
        variant="outline"
        onClick={() => {
          acknowledged.value = false;
          open.value = true;
        }}
      >
        Remove example
      </Button>
      <RiskConfirmation
        id="remove-sample"
        open={open}
        title="Remove example"
        description="This is a local component example; it does not delete real files."
        acknowledgeLabel="I understand this action only affects the example."
        cancelLabel="Cancel"
        confirmLabel="Confirm removal"
        acknowledged={acknowledged}
        onAcknowledgedChange={(next) => {
          acknowledged.value = next;
        }}
        onCancel={() => {
          open.value = false;
        }}
        onConfirm={() => {
          open.value = false;
          feedback.value = "Removed the local example.";
        }}
      />
      <Note role="status">{feedback}</Note>
    </Stack>
  );
}