"use client";

import { Pannel } from "dispatch/_components/pannel/Pannel";
import { usePannelStore } from "_store/pannelStore";
import { cn } from "helpers/cn";
import dynamic from "next/dynamic";
import { Chat } from "../_components/left/Chat";
import { Report } from "../_components/left/Report";

const DispatchPage = () => {
	const { isOpen } = usePannelStore();
	return (
		<div className="relative flex-1 flex transition-all duration-500 ease w-full">
			{/* <MapToastCard2 /> */}
			<div className="flex flex-1 relative">
				<div className="absolute left-0 top-1/2 transform -translate-y-1/2 pl-4 z-999999">
					<Chat />
					<div className="mt-2">
						<Report />
					</div>
				</div>
			</div>
			<div
				className={cn(
					"absolute right-0 w-[500px] z-999 transition-transform",
					isOpen ? "translate-x-0" : "translate-x-full",
				)}
			>
				<Pannel />
			</div>
		</div>
	);
};

DispatchPage.displayName = "DispatchPage";

export default DispatchPage;