import { useState } from "react";
import type { WidgetProps } from "./types";

export function FreetextWidget({ descriptor, onRespond }: WidgetProps) {
  const [text, setText] = useState("");
  function submit() {
    if (text.trim()) onRespond({ id: descriptor.id, kind: "freetext", text });
  }
  return (
    <div className="space-y-3 rounded-xl border border-border/70 bg-card p-4 shadow-sm">
      {descriptor.title && (
        <p className="text-[0.95rem] font-semibold leading-snug text-foreground">
          {descriptor.title}
        </p>
      )}
      <textarea
        data-awaiting-input="true"
        className="thot-awaiting-input min-h-24 w-full resize-y rounded-lg border p-3 text-sm shadow-xs outline-none transition-[border-color,box-shadow]"
        value={text}
        onChange={(e) => setText(e.target.value)}
        onKeyDown={(e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); submit(); } }}
        placeholder="Type your answer…"
      />
      <button
        className="rounded-md bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground shadow-xs transition-colors hover:bg-[oklch(var(--primary-hover))]"
        onClick={submit}
      >
        Send
      </button>
    </div>
  );
}