import React from "react";
import "../styles/PersonalInfoSection.css";

const PersonalInfoSection = ({ formData, onInputChange }) => {
  const personalIcon = (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className="personal-info-icon"
    >
      <path
        d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        d="M12 11C14.2091 11 16 9.20914 16 7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7C8 9.20914 9.79086 11 12 11Z"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );

  return (
    <div className="personal-info-section">
      <h3 className="personal-info-title">
        {personalIcon}
        Personal Information
      </h3>
      <div className="form-grid">
        <div className="form-column">
          <div className="input-group">
            <label htmlFor="employee_name" className="input-label">
              Employee Name <span className="required-asterisk">*</span>
            </label>
            <input
              type="text"
              id="employee_name"
              name="employee_name"
              className="input-field"
              placeholder="Full Name"
              value={formData.employee_name}
              onChange={onInputChange}
              required
            />
          </div>
          <div className="input-group">
            <label htmlFor="email_id" className="input-label">
              Email ID <span className="required-asterisk">*</span>
            </label>
            <input
              type="email"
              id="email_id"
              name="email_id"
              className="input-field"
              placeholder="Email Address"
              value={formData.email_id}
              onChange={onInputChange}
              required
            />
          </div>
        </div>
        <div className="form-column">
          <div className="input-group">
            <label htmlFor="phonenumber" className="input-label">
              Phone Number
            </label>
            <input
              type="tel"
              id="phonenumber"
              name="phonenumber"
              className="input-field"
              placeholder="Phone Number"
              value={formData.phonenumber}
              onChange={onInputChange}
            />
          </div>
        </div>
      </div>
    </div>
  );
};

export default PersonalInfoSection;

