export default function PageWithJSbasedForm() {
    const handleSubmit = async (event) => {
      event.preventDefault()
      const data = {
        "status":"published",
        name: event.target.schoolName.value,
        country: event.target.country.value,
       
      }
      const JSONdata = JSON.stringify(data)
      const endpoint = 'https://management.beanstalkedu.com/items/school'
      const options = {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSONdata,
      }
      const response = await fetch(endpoint, options)
  
      const result = await response.json()
      alert(`Is this your full name: ${result.data}`)
    }
    return (
      <form onSubmit={handleSubmit}>
        <label >School Name</label>
        <input type="text" name="schoolName" required />
  
        <label htmlFor="last">Country</label>
        <input type="text" id="last" name="country" required />
  
        <button type="submit">Submit</button>
      </form>
    )
  }