"use client";
import { useChat } from "@ai-sdk/react";

export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat();
  return (
    <div className="space-y-4">
      <div className="space-y-2 max-h-[60vh] overflow-y-auto rounded border p-3">
        {messages.map((m) => (
          <div key={m.id} className={m.role === "user" ? "text-right" : ""}>
            <span className="inline-block rounded-lg bg-zinc-100 px-3 py-2 text-sm">{m.content}</span>
          </div>
        ))}
      </div>
      <form onSubmit={handleSubmit} className="flex gap-2">
        <input value={input} onChange={handleInputChange} className="flex-1 rounded border p-2" placeholder="Stel een vraag..." />
        <button className="rounded bg-blue-600 px-4 py-2 text-white">Verstuur</button>
      </form>
    </div>
  );
}