"use client";



import BoldIcon from "@/components/ui/BoldIcon";



interface VideoMessageBubbleProps {

  src: string;

  isOutgoing?: boolean;

}



/** Full video preview — not compressed file card */

export default function VideoMessageBubble({

  src,

  isOutgoing,

}: VideoMessageBubbleProps) {

  return (

    <div

      className={`relative max-w-[min(280px,85vw)] overflow-hidden rounded-2xl ${

        isOutgoing ? "ring-1 ring-white/20" : "shadow-md"

      }`}

    >

      <video

        src={src}

        className="max-h-72 w-full min-w-[200px] object-contain bg-black/90"

        muted

        playsInline

        preload="metadata"

      />

      <div className="absolute inset-0 flex items-center justify-center bg-black/30">

        <span className="flex h-12 w-12 items-center justify-center rounded-full bg-white/25 backdrop-blur-sm">

          <BoldIcon name="play" size={24} tinted className="ml-0.5 text-white" />

        </span>

      </div>

    </div>

  );

}

