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

const OrganizationInfoSection = ({
  formData,
  departments,
  countries,
  locations,
  onInputChange,
}) => {
  const orgIcon = (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className="organization-info-icon"
    >
      <path
        d="M3 9L12 2L21 9V20C21 20.5304 20.7893 21.0391 20.4142 21.4142C20.0391 21.7893 19.5304 22 19 22H5C4.46957 22 3.96086 21.7893 3.58579 21.4142C3.21071 21.0391 3 20.5304 3 20V9Z"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        d="M9 22V12H15V22"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );

  return (
    <div className="organization-info-section">
      <h3 className="organization-info-title">
        {orgIcon}
        Organization Information
      </h3>
      <div className="form-grid">
        <div className="form-column">
          <div className="input-group">
            <label htmlFor="country_id" className="input-label">
              Country
            </label>
            <select
              id="country_id"
              name="country_id"
              className="input-field select-field"
              value={formData.country_id}
              onChange={onInputChange}
            >
              <option value="">Select Country</option>
              {countries.map((country) => (
                <option key={country.country_id} value={country.country_id}>
                  {country.country_name}
                </option>
              ))}
            </select>
          </div>
        </div>
        <div className="form-column">
          <div className="input-group">
            <label htmlFor="location_id" className="input-label">
              Site
            </label>
            <select
              id="location_id"
              name="location_id"
              className="input-field select-field"
              value={formData.location_id}
              onChange={onInputChange}
              disabled={!formData.country_id || locations.length === 0}
            >
              <option value="">
                {!formData.country_id
                  ? "Select Country first"
                  : locations.length === 0
                  ? "No site available"
                  : "Select Site"}
              </option>
              {locations.map((loc) => (
                <option key={loc.location_id} value={loc.location_id}>
                  {loc.location_name}
                </option>
              ))}
            </select>
          </div>
        </div>
      </div>
      <div className="form-grid">
        <div className="form-column">
          <div className="input-group">
            <label htmlFor="department_id" className="input-label">
              Work area
            </label>
            <select
              id="department_id"
              name="department_id"
              className="input-field select-field"
              value={formData.department_id}
              onChange={onInputChange}
              disabled={!formData.location_id || departments.length === 0}
            >
              <option value="">
                {!formData.location_id
                  ? "Select site first"
                  : departments.length === 0
                  ? "No work area available"
                  : "Select Work area"}
              </option>
              {departments.map((dept) => (
                <option key={dept.department_id} value={dept.department_id}>
                  {dept.department_name}
                </option>
              ))}
            </select>
          </div>
        </div>
      </div>
    </div>
  );
};

export default OrganizationInfoSection;

