import { HeadlessModal } from '@tour-kit/announcements/headless';

<HeadlessModal
  id="welcome"
  render={({ isVisible, config, hide, dismiss, titleId, descriptionId }) => {
    if (!isVisible) return null;

    return (
      <div className="modal-container">
        <div className="overlay" onClick={hide} />
        <div
          role="dialog"
          aria-modal="true"
          aria-labelledby={titleId}
          aria-describedby={descriptionId}
          className="modal-content"
        >
          <h2 id={titleId}>{config.title}</h2>
          <p id={descriptionId}>{config.description}</p>
          <button onClick={hide}>Close</button>
          <button onClick={() => dismiss()}>Don't Show Again</button>
        </div>
      </div>
    );
  }}
/>