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

interface AnnotationEditorProps {
	initialValue?: string;
	loading?: boolean;
	onSubmit: (value: string) => void;
	onCancel?: () => void;
	submitLabel?: string;
	cancelLabel?: string;
}

export function AnnotationEditor({
	initialValue = "",
	loading = false,
	onSubmit,
	onCancel,
	submitLabel = "Submit",
	cancelLabel = "Cancel",
}: AnnotationEditorProps) {
	const [value, setValue] = useState(initialValue);

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

	return (
		<form onSubmit={handleSubmit} className="space-y-2">
			<Textarea
				value={value}
				onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
					setValue(e.target.value)
				}
				placeholder="Add your annotation..."
				className="min-h-24 resize-y"
				disabled={loading}
			/>
			<div className="flex gap-2 justify-end">
				{onCancel && (
					<Button
						type="button"
						variant="outline"
						size="sm"
						onClick={onCancel}
						disabled={loading}
					>
						{cancelLabel}
					</Button>
				)}
				<Button type="submit" size="sm" disabled={loading || !value.trim()}>
					{loading ? "Submitting..." : submitLabel}
				</Button>
			</div>
		</form>
	);
}
