"use client"

import { useState } from "react"
import { PrismaClient, Message } from "@prisma/client"

export default function PostMessageForm(props: {data: Message[]}){
    const [formData, setFormData] = useState({}) 
    const [messagesState, setMessages] = useState(props.data)
  
    async function postMessage(e:any) {
      e.preventDefault()
      /* setMessages([...messagesState, formData]) */
      console.log(formData)
      const response = await fetch('http://localhost:3000/api/messages', {
          method: 'POST',
          body: JSON.stringify(formData)
      })
      return await response.json()
    }

    return (<div>
        <form onSubmit={postMessage}>
        <input type="text" placeholder="content" name="content" onChange={e => setFormData({ ...formData, content : e.target.value })}/>
        <textarea name="content" id="" cols={30} rows={10} placeholder="content" onChange={e => setFormData({ ...formData, content: e.target.value })} />
        <button type="submit">Post Message</button>
        </form>
        
        </div>)
}