Bubble

"use client";

import { Bubble, BubbleContent, BubbleGroup, BubbleReactions } from "@/components/ui/bubble";

export function Demo() {
  return (
    <div className="flex w-full max-w-md flex-col gap-fe-5">
      <BubbleGroup>
        <Bubble variant="secondary">
          <BubbleContent>Hey! Quer ver bolhas de chat?</BubbleContent>
        </Bubble>
        <Bubble variant="secondary">
          <BubbleContent>
            Posso agrupar mensagens, trocar lados e manter a thread legível.
          </BubbleContent>
        </Bubble>
      </BubbleGroup>
      <Bubble variant="default" align="end">
        <BubbleContent>Sim — manda a demo.</BubbleContent>
        <BubbleReactions role="img" aria-label="Reações: joinha e fogo">
          <span>👍</span>
          <span>🔥</span>
        </BubbleReactions>
      </Bubble>
      <Bubble variant="outline">
        <BubbleContent>
          Variante outline para conteúdo secundário com borda visível.
        </BubbleContent>
      </Bubble>
    </div>
  );
}