"use client";
import { useTalkStore } from "../../_store/useTalkStore";

export const ToggleTalkButton = () => {
	const { isTalking, toggleTalking } = useTalkStore();

	return (
		<button
			onClick={toggleTalking}
			className={`${
				isTalking
					? "bg-red-500 hover:bg-red-600"
					: "bg-transparent hover:bg-neutral-300"
			}`}
		>
			<svg
				xmlns="http://www.w3.org/2000/svg"
				className="h-5 w-5"
				fill="none"
				viewBox="0 0 24 24"
				stroke="currentColor"
			>
				<path
					strokeLinecap="round"
					strokeLinejoin="round"
					strokeWidth="2"
					d="M12 18.75a6 6 0 0 0 6-6v-1.5m-6 7.5a6 6 0 0 1-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 0 1-3-3V4.5a3 3 0 1 1 6 0v8.25a3 3 0 0 1-3 3Z"
				/>
			</svg>
		</button>
	);
};