"use client";

import { cn } from "@/lib/utils";
import BoldIcon from "@/components/ui/BoldIcon";
import { viewOnceLabel } from "@/lib/chat/viewOnce";
import ChatBoldIcon from "./ChatBoldIcon";

interface ViewOnceMediaBubbleProps {
  fileType: "image" | "video" | "voice";
  isOutgoing?: boolean;
  expired?: boolean;
  onOpen?: () => void;
  borderRadius?: string;
}

export default function ViewOnceMediaBubble({
  fileType,
  isOutgoing = false,
  expired = false,
  onOpen,
  borderRadius = "18px",
}: ViewOnceMediaBubbleProps) {
  const mediaIcon =
    fileType === "voice" ? (
      <ChatBoldIcon name="microphone" size={28} className="text-[#ff9500]" />
    ) : fileType === "video" ? (
      <BoldIcon name="video" size={28} tinted className="text-current" />
    ) : (
      <BoldIcon name="gallery" size={28} tinted className="text-current" />
    );

  return (
    <button
      type="button"
      disabled={expired}
      onClick={(e) => {
        e.stopPropagation();
        if (!expired) onOpen?.();
      }}
      className={cn(
        "gentle-transition flex w-44 flex-col items-center justify-center gap-2 px-4 py-6 sm:w-52",
        isOutgoing ? "chat-bubble-out" : "chat-bubble-in",
        expired ? "cursor-default opacity-60" : "cursor-pointer active:scale-[0.98]"
      )}
      style={{ borderRadius }}
    >
      <div
        className={cn(
          "flex h-14 w-14 items-center justify-center rounded-full",
          expired
            ? "bg-neutral-300/40 dark:bg-neutral-600/40"
            : "bg-[#ff9500]/15 text-[#ff9500]"
        )}
      >
        {mediaIcon}
      </div>
      <span className="text-center text-xs font-medium leading-snug">
        {expired ? "پیام منقضی شد" : viewOnceLabel(fileType)}
      </span>
      {!expired && (
        <span className="flex items-center gap-1 text-[10px] text-[#ff9500]">
          <ChatBoldIcon name="eye" size={12} className="text-[#ff9500]" />
          برای مشاهده بزنید
        </span>
      )}
    </button>
  );
}
