"use client";

import { BookOpenIcon, PenLineIcon } from "lucide-react";
import { usePlateState } from "platejs/react";

import { ToolbarButton } from "./toolbar";

export function ModeToolbarButton() {
	const [readOnly, setReadOnly] = usePlateState("readOnly");

	return (
		<ToolbarButton
			tooltip={readOnly ? "Click to edit" : "Click to view"}
			onClick={() => setReadOnly(!readOnly)}
		>
			{readOnly ? <BookOpenIcon /> : <PenLineIcon />}
		</ToolbarButton>
	);
}