import type React from "react";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";

interface InlineAnnotationFormProps {
	onSubmit: (value: string) => void;
	loading?: boolean;
}

export function InlineAnnotationForm({
	onSubmit,
	loading = false,
}: InlineAnnotationFormProps) {
	const [value, setValue] = useState("");

	const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
		e.preventDefault();
		if (!value.trim()) return;
		onSubmit(value);
		setValue("");
	};

	return (
		<form onSubmit={handleSubmit} className="flex gap-2 items-center">
			<Textarea
				value={value}
				onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
					setValue(e.target.value)
				}
				placeholder="Quick annotation..."
				className="min-h-12 resize-y"
				disabled={loading}
			/>
			<Button type="submit" size="sm" disabled={loading || !value.trim()}>
				{loading ? "Adding..." : "Add"}
			</Button>
		</form>
	);
}
