import React, { useState } from "react";

const ManageProject = () => {
  const [projectData, setProjectData] = useState({
    name: "",
    description: "",
    startDate: "",
    endDate: "",
  });
  const [isProjectCreated, setIsProjectCreated] = useState(false);

  // Handle input change
  const handleChange = (e) => {
    const { name, value } = e.target;
    setProjectData({ ...projectData, [name]: value });
  };

  // Handle form submission
  const handleSubmit = (e) => {
    e.preventDefault();
    setIsProjectCreated(true);
  };

  return (
    <div style={{ padding: "20px" }}>
      {!isProjectCreated ? (
        <form onSubmit={handleSubmit}>
          <h2>Create Project</h2>
          <div>
            <label>Project Name:</label>
            <input
              type="text"
              name="name"
              value={projectData.name}
              onChange={handleChange}
              required
            />
          </div>
          <div>
            <label>Description:</label>
            <textarea
              name="description"
              value={projectData.description}
              onChange={handleChange}
              required
            />
          </div>
          <div>
            <label>Start Date:</label>
            <input
              type="date"
              name="startDate"
              value={projectData.startDate}
              onChange={handleChange}
              required
            />
          </div>
          <div>
            <label>End Date:</label>
            <input
              type="date"
              name="endDate"
              value={projectData.endDate}
              onChange={handleChange}
              required
            />
          </div>
          <button type="submit">Create Project</button>
        </form>
      ) : (
        <div>
          <h2>Project Created Successfully!</h2>
          <p>Project Name: {projectData.name}</p>
          <p>Description: {projectData.description}</p>
          <p>Start Date: {projectData.startDate}</p>
          <p>End Date: {projectData.endDate}</p>
        </div>
      )}

      {isProjectCreated && (
        <div>
          <h3>Additional Content</h3>
          <p>Now that the project is created, you can access this content.</p>
          {/* Add more content here */}
        </div>
      )}
    </div>
  );
};

export default ManageProject;