#ConfettiLayer

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

export default function Demo() {
  const confetti = useRef<ConfettiHandle>(null);

  return (
    <div className="site-demo site-demo--center">
      <div style={{ position: 'relative', width: 140, height: 140 }}>
        <CharacterMark shape="blob" color="green" state="celebrate" sizePx={140} />
        <ConfettiLayer ref={confetti} />
      </div>
      <div className="site-controls">
        <button className="site-btn" onClick={() => confetti.current?.burst(18)}>
          burst(18)
        </button>
        <button className="site-btn" onClick={() => confetti.current?.burst(60)}>
          burst(60)
        </button>
        <button className="site-btn" onClick={() => confetti.current?.clear()}>
          clear()
        </button>
      </div>
    </div>
  );
}