"use client";
import React from "react";
import { createNewOrganization } from "../../../services/organizations/orgs";

const Organizations = () => {
  const [name, setName] = React.useState("");
  const [description, setDescription] = React.useState("");
  const [email, setEmail] = React.useState("");
  const [slug, setSlug] = React.useState("");

  const handleNameChange = (e: any) => {
    setName(e.target.value);
  };

  const handleDescriptionChange = (e: any) => {
    setDescription(e.target.value);
  };

  const handleEmailChange = (e: any) => {
    setEmail(e.target.value);
  };

  const handleSlugChange = (e: any) => {
    setSlug(e.target.value);
  };

  const handleSubmit = async (e: any) => {
    e.preventDefault();
    
    let logo = ''
    const status = await createNewOrganization({ name, description, email, logo, slug, default: false });
    alert(JSON.stringify(status));
  };

  return (
    <div>
     <div className="font-bold text-lg">New Organization</div>
      Name: <input onChange={handleNameChange} type="text" />
      <br />
      Description: <input onChange={handleDescriptionChange} type="text" />
      <br />
      Slug: <input onChange={handleSlugChange} type="text" />
      <br />
      Email Address: <input onChange={handleEmailChange} type="text" />
      <br />
      <button onClick={handleSubmit}>Create</button>
    </div>
  );
};

export default Organizations;