"use client";

import { FiPlay } from "react-icons/fi";

interface VideoMessageBubbleProps {
  src: string;
  isOutgoing?: boolean;
  onOpen: () => void;
}

/** Full video preview — not compressed file card */
export default function VideoMessageBubble({
  src,
  isOutgoing,
  onOpen,
}: VideoMessageBubbleProps) {
  return (
    <button
      type="button"
      onClick={onOpen}
      className={`gentle-transition relative max-w-[min(280px,85vw)] overflow-hidden rounded-2xl active:scale-[0.98] ${
        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">
          <FiPlay className="ml-0.5 text-2xl text-white" />
        </span>
      </div>
    </button>
  );
}
