Sticker Bubble

1"use client";
2 
3import * as React from "react";
4import { cn } from "@/lib/utils";
5import { type MessageStatus, MessageStatusIcon } from "./message-status";
6import "@/components/ui/whatsapp/styles/whatsapp.css";
7 
8export interface StickerBubbleProps extends React.HTMLAttributes<HTMLDivElement> {
9  variant?: "incoming" | "outgoing";
10  src: string;
11  alt?: string;
12  animated?: boolean;
13  timestamp?: string;
14  status?: MessageStatus;
15  showTail?: boolean;
16}
17 
18const StickerBubble = React.forwardRef<HTMLDivElement, StickerBubbleProps>(
19  (
20    {
21      className,
22      variant = "incoming",
23      src,
24      alt = "Sticker",
25      animated = false,
26      timestamp,
27      status,
28      showTail = false,
29      ...props
30    },
31    ref
32  ) => {
33    const isOutgoing = variant === "outgoing";
34 
35    return (
36      <div
37        className={cn(
38          "flex w-full",
39          isOutgoing ? "justify-end" : "justify-start",
40          showTail ? "mb-[6px]" : "mb-[2px]",
41          className
42        )}
43        {...props}
44        ref={ref}
45      >
46        <div className="flex flex-col items-end">
47          {/* No bubble background — sticker floats directly */}
48          <div className="relative h-[160px] w-[160px]">
49            <img
50              src={src}
51              alt={alt}
52              className="h-full w-full object-contain"
53              draggable={false}
54            />
55 
56            {/* Animated badge */}
57            {animated && (
58              <span className="absolute left-1 top-1 rounded bg-black/50 px-[5px] py-[2px] text-[10px] font-bold uppercase tracking-wide text-white">
59                GIF
60              </span>
61            )}
62          </div>
63 
64          {/* Timestamp pill below sticker */}
65          {(timestamp || (isOutgoing && status)) && (
66            <div className="mt-[-4px] flex items-center gap-[3px] rounded-full bg-black/40 px-[6px] py-[2px]">
67              {timestamp && (
68                <span className="text-[11px] leading-[15px] text-white">{timestamp}</span>
69              )}
70              {isOutgoing && status && (
71                <span className="text-white"><MessageStatusIcon status={status} /></span>
72              )}
73            </div>
74          )}
75        </div>
76      </div>
77    );
78  }
79);
80StickerBubble.displayName = "StickerBubble";
81 
82export { StickerBubble };