#usePublishMark

import { useRef } from 'react';
import { CharacterMark, ConfettiLayer, type ConfettiHandle } from '@aora-bot/react';
import { usePublishMark } from '@aora-bot/surfaces';

export default function Demo() {
  const confetti = useRef<ConfettiHandle>(null);
  const publish = usePublishMark({ confetti, celebrateMs: 1600 });

  const save = async (ok: boolean) => {
    publish.begin();
    await new Promise((r) => setTimeout(r, 900));
    if (ok) publish.succeed();
    else publish.fail();
  };

  return (
    <div className="site-demo site-demo--column">
      <div style={{ position: 'relative', display: 'inline-flex' }}>
        <CharacterMark shape="star" color="orange" state={publish.characterState} sizePx={80} />
        <ConfettiLayer ref={confetti} />
      </div>
      <span className="site-demo__label">{publish.state}</span>
      <div className="site-controls">
        <button className="site-btn" disabled={publish.state === 'publishing'} onClick={() => save(true)}>
          发布
        </button>
        <button className="site-btn" disabled={publish.state === 'publishing'} onClick={() => save(false)}>
          发布，然后失败
        </button>
      </div>
    </div>
  );
}