'use client'
import dynamic from "next/dynamic";
import { useSelector } from "react-redux";
import { AppStore } from "@/lib/store";

const ChatComponent = dynamic(() => import("./ChatMessages"), {
  ssr: false,
});

const BrandMessages = dynamic(() => import("./BrandMessages"), {
  ssr: false,
});

const Messages = () => {
  const userDetails: any = useSelector((state: AppStore) => state.userDetailSlice?.userDetails);

  // Wait for role so brand never flashes the old CometChat list
  if (!userDetails?.role) {
    return (
      <div className="flex items-center justify-center h-[50vh] text-sm text-neutral-400">
        Loading...
      </div>
    );
  }

  if (userDetails.role === 'brand') {
    return <BrandMessages />;
  }

  return <ChatComponent />;
}

export default Messages