"use client";

import { ReactNode, useMemo } from "react";
import { RoomProvider as LiveblocksRoomProvider, getRandomColor, getRandomName } from "@/lib/liveblocks.config";

interface CollaborationRoomProps {
  roomId: string;
  children: ReactNode;
  fallback?: ReactNode;
}

/**
 * Wrapper component that provides real-time collaboration context
 */
export function CollaborationRoom({ roomId, children, fallback }: CollaborationRoomProps) {
  // Generate user identity (in production, this would come from auth)
  const userInfo = useMemo(() => ({
    name: getRandomName(),
    color: getRandomColor(),
  }), []);

  return (
    <LiveblocksRoomProvider
      id={roomId}
      initialPresence={{
        cursor: null,
        name: userInfo.name,
        color: userInfo.color,
        activeFieldId: null,
      }}
      initialStorage={{
        canvasData: {},
      }}
    >
      {children}
    </LiveblocksRoomProvider>
  );
}