"use client";

import { ChatInputOrder } from "./ChatInputOrder";
import { ChatBubble } from "./ChatBubble";
import { ProductProps } from '@/app/(root)/order/[orderId]/_components/ProductInfo';

export type Chat = {
  id: number;
  userId: string;
  img: string;
  msg: string | null;
  order?: Omit<ProductProps, 'id'|'quantity'>;
  date: string;
};

interface ChatOrderProps {
  data: {
    message: string;
    id: string;
    User: {
      name: string | null;
      image: string | null;
    };
    chat: Chat;
  }[];
}

export const dynamic = "force-dynamic";

function ChatOrder({ data }: ChatOrderProps) {
  return (
    <div className="bg-primary-black w-[872px] h-[585px] rounded-md overflow-hidden border border-white/10 relative ml-4">
      <div className="h-24 border-b border-white/10 flex items-center px-10">
        <div className="w-16 h-16 bg-gray-400/60 rounded-full" />
        <span className="text-white font-bold text-2xl ml-5">
          WILDRIFTBOOSTS
        </span>
      </div>
      <div className="absolute right-0 left-0 top-24 h-[430px]">
        <ChatBubble initialData={data as any} />
      </div>
      <div className="absolute bottom-0 left-0 right-0">
        <ChatInputOrder />
      </div>
    </div>
  );
}

export { ChatOrder };