// import React, { useState } from 'react';
// import 'bootstrap/dist/css/bootstrap.min.css';
// import "../Dashboard/CSS/CSS/CommonStyle.css";

// function DataType5() {
//   const [firstName, setFirstName] = useState('');
//   const [secondName, setSecondName] = useState('');
//   const [description, setDescription] = useState('');

//   const handleFirstNameChange = (e) => {
//     setFirstName(e.target.value);
//   };

//   const handleSecondNameChange = (e) => {
//     setSecondName(e.target.value);
//   };

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

//   const handleSubmit = (e) => {
//     e.preventDefault();
    
//     const formData = {
//       Name: firstName,
//       test2 : {Name: secondName, description: description }
//     };
//     console.log(JSON.stringify(formData));  
//   };

//   return (
//     <div className="container mt-4" style={{ width: '50%' }}>
//      <div className='card p-4 shadow-sm rounded'>
//      <form onSubmit={handleSubmit}>
//         <div className="form-group">
//           <label htmlFor="first-name" className="form-label"> Name:</label>
//           <input
//             type="text"
//             id="first-name"
//             name="first-name"
//             className="form-control"
//             value={firstName}
//             onChange={handleFirstNameChange}
//             placeholder="Enter your first name"
//           />
//         </div>
//         <h2 className=" title_main mt-3 text-primary" >Test 2</h2>
//         <div className="form_content">
//         <div className="form-group">
//           <label htmlFor="second-name" className="form-label"> Name:</label>
//           <input
//             type="text"
//             id="second-name"
//             name="second-name"
//             className="form-control"
//             value={secondName}
//             onChange={handleSecondNameChange}
//             placeholder="Enter your second name"
//           />
//         </div>
//         <div className="mb-3">
//           <label htmlFor="description" className="form-label">Description:</label>
//           <textarea
//             id="description"
//             name="description"
//             className="form-control"
//             rows="4"
//             value={description}
//             onChange={handleDescriptionChange}
//             placeholder="Describe yourself"
//           ></textarea>
//         </div>
//         </div>
        
//         <button type="submit" className="btn btn-primary">Submit</button>
//       </form>
//      </div>
      
//     </div>
//   );
// }

// export default DataType5;


import React, { useState,useEffect } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import "../Dashboard/CSS/CSS/CommonStyle.css";
import Spinner from '../../UIComponants/Spinner';

function DataType5() {
  const [firstName, setFirstName] = useState('');
  const [secondName, setSecondName] = useState('');
  const [description, setDescription] = useState('');
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // Simulate loading data
    setTimeout(() => {
      setLoading(false);
    }, 3000); // Simulated 3 seconds loading
  }, []);
  const handleFirstNameChange = (e) => {
    setFirstName(e.target.value);
  };

  const handleSecondNameChange = (e) => {
    setSecondName(e.target.value);
  };

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

  const handleSubmit = (e) => {
    e.preventDefault();

    const formData = {
      Name: firstName,
      test2: { Name: secondName, description: description },
    };
    console.log(JSON.stringify(formData));
  };

  return (
    <div style={{marginTop:"11rem"}}>
      {loading ? (
        <Spinner/>
      ):(
        <div className="container mt-5 mb-5" style={{ maxWidth: '600px' }}>
      <div className="card p-4 shadow-lg border-0 rounded">
        <h2 className="text-center mb-4  title_main" style={{ fontWeight: 'bold' }}>
          Main Details
        </h2>
        <form onSubmit={handleSubmit}>
          {/* First Name Field */}
          <div className="form-group mb-3">
            <label htmlFor="first-name" className="form-label fw-semibold">
              First Name:
            </label>
            <input
              type="text"
              id="first-name"
              name="first-name"
              className="form-control shadow-sm custom-hover-border"
              value={firstName}
              onChange={handleFirstNameChange}
              placeholder="Enter your name"
              required
            />
          </div>

          {/* Section Header */}
          <h3 className="mt-4 mb-3 title_main" style={{ fontWeight: 'bold' }}>
            Test 2
          </h3>

          {/* Second Name Field */}
          <div className="form-group mb-3">
            <label htmlFor="second-name" className="form-label fw-semibold">
              Second Name:
            </label>
            <input
              type="text"
              id="second-name"
              name="second-name"
              className="form-control shadow-sm  custom-hover-border"
              value={secondName}
              onChange={handleSecondNameChange}
              placeholder="Enter your second name"
              required
            />
          </div>

          {/* Description Field */}
          <div className="form-group mb-4">
            <label htmlFor="description" className="form-label fw-semibold">
              Description:
            </label>
            <textarea
              id="description"
              name="description"
              className="form-control shadow-sm custom-hover-border"
              rows="4"
              value={description}
              onChange={handleDescriptionChange}
              placeholder="Write a brief description about yourself"
              required
            ></textarea>
          </div>

          {/* Submit Button */}
          <div className="text-center">
            <button
              type="submit"
              className="btn btn-primary btn-lg shadow-sm"
              style={{
                background: 'linear-gradient(90deg, #0E6591, #0B4C6A)',
                border: 'none',
                color: '#fff',
              }}
            >
              Submit
            </button>
          </div>
        </form>
      </div>
    </div>
      )}
    </div>
    
  );
}

export default DataType5;
