import React from "react";
import RoleDropdown from "../common/RoleDropdown";
import "../styles/AccessControlSection.css";

const AccessControlSection = ({
  formData,
  accountStatuses,
  roles,
  onInputChange,
  onRoleChange,
}) => {
  const statusIcon = (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className="access-control-icon"
    >
      <path
        d="M12 15C15.866 15 19 11.866 19 8C19 4.13401 15.866 1 12 1C8.13401 1 5 4.13401 5 8C5 11.866 8.13401 15 12 15Z"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        d="M8.21 13.89L7 23L12 20L17 23L15.79 13.88"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );

  return (
    <div className="access-control-section">
      <h3 className="access-control-title">
        {statusIcon}
        Access Control
      </h3>
      <div className="form-grid">
        <div className="form-column">
          <div className="input-group">
            <label htmlFor="status_id" className="input-label">
              Status
            </label>
            <select
              id="status_id"
              name="status_id"
              className="input-field select-field"
              value={formData.status_id}
              onChange={onInputChange}
            >
              <option value="">Select Status</option>
              {accountStatuses.map((status) => (
                <option key={status.status_id} value={status.status_id}>
                  {status.status_name}
                </option>
              ))}
            </select>
          </div>
        </div>
        <div className="form-column">
          <div className="input-group">
            <label htmlFor="role_ids" className="input-label">
              Roles <span className="required-asterisk">*</span>
            </label>
            <RoleDropdown
              roles={roles}
              value={formData.role_ids[0] ?? ""}
              onChange={onRoleChange}
              loading={false}
            />
          </div>
        </div>
      </div>
    </div>
  );
};

export default AccessControlSection;
