// Success moment: the badge falls in under gravity and lands with a squash,
// then does a victory `tada`. Scoped to the `cartoon` personality (guardrails
// off) without changing the rest of the app.
import { useEffect } from "react";
import { fallIn, tada } from "twelve-principles";
import { MotionProvider, useMotion } from "twelve-principles/react";

function Badge({ label }: { label: string }) {
  const { ref, play } = useMotion<HTMLDivElement>();
  useEffect(() => {
    const landing = play((p) => fallIn({ personality: p, height: 120 }));
    let cancelled = false;
    landing?.finished.then(
      () => {
        if (!cancelled) play((p) => tada({ personality: p }));
      },
      () => undefined, // interrupted: skip the follow-up
    );
    return () => {
      cancelled = true;
    };
  }, [play]);
  return (
    <div ref={ref} className="celebrate-badge" role="status">
      {label}
    </div>
  );
}

export function Celebrate({ label = "完了！" }: { label?: string }) {
  return (
    <MotionProvider personality="cartoon">
      <Badge label={label} />
    </MotionProvider>
  );
}