//Page3.js

import React, { useState } from "react";
import './Page3.css'

const Page3 = () => {
  const [meetingDetails, setMeetingDetails] = useState(null);

  // Handle form submission
  const handleSubmit = async (event) => {
    event.preventDefault();

    try {
      const response = await fetch('/create-meeting', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
      });

      const data = await response.json();
      setMeetingDetails({
        id: data.id,
        join_url: data.join_url,
      });
    } catch (error) {
      console.error("Error creating meeting:", error);
    }
  };

  return (
    <div>
      <h1>Generate Zoom Meeting</h1>
      <form id="meetingForm" onSubmit={handleSubmit}>
        <button type="submit">Create Meeting</button>
      </form>

      {meetingDetails && (
        <div id="meetingDetails">
          <p>Meeting ID: {meetingDetails.id}</p>
          <p>
            Join URL:{" "}
            <a href={meetingDetails.join_url} target="_blank" rel="noopener noreferrer">
              {meetingDetails.join_url}
            </a>
          </p>
        </div>
      )}
    </div>
  );
};

export default Page3;