<!-- src/routes/write.svelte -->
<script>
	import { addMessage } from '$lib/services/messages';
	import { messagesStore } from '$lib/data/stores';

	let newMessage = '';

	const handleSubmit = () => {
		addMessage(newMessage);
		newMessage = ''; // Reset the input field
	};

	// Subscribe to the messagesStore to reactively refresh messages
	$: messages = $messagesStore;
</script>

<main class="p-4">
	<input
		type="text"
		bind:value={newMessage}
		placeholder="Type your message..."
		class="p-2 border rounded"
	/>
	<button
		class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded mt-2"
		on:click={handleSubmit}
	>
		Send Message
	</button>
</main>

<style>
	/* Add any additional styles as needed */
</style>
