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

export function FallbackWidget({ descriptor, onRespond }: WidgetProps) {
  const [text, setText] = useState("");
  return (
    <div className="rounded-xl border border-border/70 bg-card p-3 shadow-sm space-y-2">
      <p className="text-sm text-amber-600">Unsupported widget (kind: {descriptor.widget}) — respond manually</p>
      <pre className="text-xs font-mono overflow-auto max-h-48 rounded-lg bg-muted p-2">{JSON.stringify(descriptor, null, 2)}</pre>
      <textarea className="w-full rounded-lg border border-input bg-card p-2 text-sm shadow-xs outline-none transition-[border-color,box-shadow] focus:border-primary/50 focus:ring-2 focus:ring-ring/20" value={text} onChange={(e) => setText(e.target.value)} />
      <button className="rounded-md border border-border/70 px-2 py-1 text-sm shadow-xs transition-colors hover:bg-accent" onClick={() => onRespond({ id: descriptor.id, control: "freetext", text })}>Send</button>
    </div>
  );
}