"use client";
import { useLeftMenuStore } from "_store/leftMenuStore";
import { useSession } from "next-auth/react";
import { cn } from "_helpers/cn";
import { ListCollapse, Plane } from "lucide-react";

export const SituationBoard = () => {
	const { setSituationTabOpen, situationTabOpen } = useLeftMenuStore();
	const session = useSession();

	return (
		<div className={cn("dropdown dropdown-top", situationTabOpen && "dropdown-open")}>
			<div className="indicator">
				<button
					className="btn btn-soft btn-sm btn-info"
					onClick={() => {
						setSituationTabOpen(!situationTabOpen);
					}}
				>
					<ListCollapse className="w-4 h-4" />
				</button>
			</div>
			{situationTabOpen && (
				<div
					tabIndex={0}
					className="dropdown-content card bg-base-200 w-150 shadow-md z-[1100] ml-2 border-1 border-info"
				>
					<div className="card-body flex flex-row gap-4">
						<div className="flex-1">
							<h2 className="inline-flex items-center gap-2 text-lg font-bold mb-2">
								<ListCollapse /> Einsatzliste
							</h2>
						</div>
						<div className="w-px bg-gray-400 mx-2" />
						<div className="flex-1">
							<h2 className="inline-flex items-center gap-2 text-lg font-bold mb-2">
								<Plane /> Stations
							</h2>
						</div>
					</div>
				</div>
			)}
		</div>
	);
};