import { useState } from "react";

import { AssetSearchBox } from "@/features";
import { MapControlContainer } from "@/shared";

import { AssetActions } from "./AssetActions";

export function MapAssetsOverlay() {
	const [isShowActions, setIsShowActions] = useState(true);

	return (
		<MapControlContainer position={["top", "left"]}>
			<div className="max-h-full overflow-hidden pt-[25px] pr-5 pb-5 pl-[65px]">
				<div className="flex flex-col items-stretch w-[390px] gap-4 mb-5">
					<AssetSearchBox
						onExpand={() => setIsShowActions(false)}
						onCollapse={() => setIsShowActions(true)}
					/>
					{isShowActions && <AssetActions />}

					<div className="mt-5" />
				</div>
			</div>
		</MapControlContainer>
	);
}
