Reaction Bar

"use client";

import ReactionBar from "@/components/ui/reaction-bar";
import Surface from "@/components/ui/reaction-bar-utils/surface";
import Text from "@/components/ui/reaction-bar-utils/text";
import { useState } from "react";

type ReactionItem = {
  id: string;
  emoji: string;
  label: string;
  count: number;
};

export default function ReactionBarDemo() {
  const [picked, setPicked] = useState<string | null>(null);
  const [reactions, setReactions] = useState<ReactionItem[]>([
    { id: "like", emoji: "👍", label: "Helpful", count: 24 },
    { id: "love", emoji: "🎉", label: "Celebrate", count: 9 },
    { id: "think", emoji: "🤔", label: "Not sure", count: 3 },
    { id: "money", emoji: "💸", label: "Costly", count: 1 },
  ]);

  const change = (id: string | null) => {
    setReactions((previous) =>
      previous.map((reaction) => {
        const was = reaction.id === picked;
        const now = reaction.id === id;
        if (was === now) return reaction;
        return { ...reaction, count: reaction.count + (now ? 1 : -1) };
      }),
    );
    setPicked(id);
  };

  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-surface-sunken p-6">
      <div className="flex w-full max-w-[460px] flex-col gap-3">
        <Surface variant="card" padding="lg" className="gap-2">
          <Text size="heading">September in review is ready</Text>
          <Text size="body" weight="medium" tone="soft" leading="normal">
            Spending is down 8% and your cashback covered two subscriptions
            outright.
          </Text>
          <div className="mt-2">
            <ReactionBar
              label="React to this update"
              reactions={reactions}
              value={picked}
              onChange={change}
            />
          </div>
        </Surface>
        <Text size="caption" tone="faint" role="status" aria-live="polite">
          {picked
            ? `You picked ${reactions.find((r) => r.id === picked)?.label}. Pick it again to take it back.`
            : "Nothing picked."}
        </Text>
      </div>
    </div>
  );
}