"use client";

import type { Asset, MarketListing, MarketNegotiation } from "@/payload-types";
import { StoreIcon } from "lucide-react";
import { buildChatBubbles } from "@/lib/market/chatBubbles";
import { ChatBubbleList } from "@/components/frontend/market/ChatBubbleList";

interface NpcChatProps {
  listing: MarketListing;
  negotiation: MarketNegotiation | null;
  currencyLabel: string | null;
}

export function NpcChat({ listing, negotiation, currencyLabel }: NpcChatProps) {
  const asset = listing.asset as Asset;
  const assetName = typeof asset === "object" && asset ? asset.name : `Asset #${listing.asset}`;
  const bubbles = buildChatBubbles(negotiation, listing, currencyLabel);

  return (
    <div className="flex flex-col gap-2 rounded-md border bg-card">
      <div className="flex items-center gap-2 border-b px-3 py-2">
        <StoreIcon className="size-4 text-muted-foreground" />
        <span className="text-xs font-medium text-muted-foreground">Vendor</span>
        <span className="text-xs text-muted-foreground">— {assetName}</span>
      </div>
      <ChatBubbleList bubbles={bubbles} buyerLabel="You" sellerLabel="Vendor" />
    </div>
  );
}