import { PlaneIcon, Workflow } from "lucide-react";
import { useSession } from "next-auth/react";

interface HeaderProps {
	isChecked: boolean;
	handleCheckboxChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
}

export const Header = ({ isChecked, handleCheckboxChange }: HeaderProps) => {
	const session = useSession();
	return (
		<header className="flex justify-between items-center p-4">
			<h1 className="text-2xl font-bold">
				Hallo,{" "}
				{session.status === "authenticated"
					? session.data?.user.firstname
					: "<username>"}
				{"!"}
			</h1>
			<div>
				<div className="tooltip" data-tip="Disponent / Pilot">
					<label className="toggle text-base-content">
						<input
							type="checkbox"
							checked={isChecked}
							onChange={handleCheckboxChange}
						/>
						<Workflow
							className="w-4 h-4"
							viewBox="0 0 24 24"
							aria-label="enabled"
						/>
						<PlaneIcon
							className="w-4 h-4"
							viewBox="0 0 24 24"
							aria-label="disabled"
						/>
					</label>
				</div>
			</div>
		</header>
	);
};
