<script>
	import { createMessage, clearMessages } from '$lib/services/messages';

	let newMessageText = '';

	function handleSend() {
		if (newMessageText.trim() !== '') {
			createMessage(newMessageText);
			newMessageText = '';
		}
	}

	function handleClear() {
		clearMessages(); // Call the clearMessages function to clear all messages.
	}
</script>

<footer class="fixed bottom-0 left-0 right-0 bg-white p-4 flex justify-end">
	<input
		type="text"
		class="flex-grow border rounded px-3 py-2 mr-2"
		placeholder="Type your message..."
		bind:value={newMessageText}
	/>
	<button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded" on:click={handleSend}>
		Send Message
	</button>
	<button
		class="bg-red-500 hover:bg-red-600 text-white py-2 px-4 rounded ml-2"
		on:click={handleClear}
	>
		Clear
	</button>
</footer>
