"use client";

import React, { useState } from "react";

export default function NoteForm({ projectId }) {
	const [note, setNote] = useState("");
	const [status, setStatus] = useState(null);

	async function handleSubmit(e) {
		e.preventDefault();

		const res = await fetch("/api/notes", {
			method: "POST",
			headers: { "Content-Type": "application/json" },
			body: JSON.stringify({ project_id: projectId, note }),
		});

		if (res.ok) {
			setNote("");
			setStatus("Note added");
			window.location.reload();
		} else {
			setStatus("Failed to save note");
		}
	}

	return (
		<form onSubmit={handleSubmit} className="space-y-2 mb-4">
			<textarea
				value={note}
				onChange={(e) => setNote(e.target.value)}
				placeholder="Add a new note..."
				className="border p-2 w-full"
				rows={3}
				required
			/>
			<button
				type="submit"
				className="bg-blue-600 text-white px-4 py-2 rounded"
			>
				Add Note
			</button>
			{status && <p className="text-sm text-gray-600">{status}</p>}
		</form>
	);
}