import React from "react";
import "./UserStatusToggle.css";

const USER_STATUS_ACTIVE = 1;

export default function UserStatusToggle({ statusId, onChange, disabled }) {
  const isActive = Number(statusId) === USER_STATUS_ACTIVE;

  const handleChange = (e) => {
    e.stopPropagation();
    onChange?.(e);
  };

  return (
    <div className="status-toggle-container" onClick={(e) => e.stopPropagation()}>
      <label className={`status-toggle-label${disabled ? " disabled" : ""}`} onClick={(e) => e.stopPropagation()}>
        <input
          type="checkbox"
          className="status-toggle-input"
          checked={isActive}
          onChange={handleChange}
          onClick={(e) => e.stopPropagation()}
          disabled={disabled}
        />
        <span className={`status-toggle-slider${isActive ? " active" : ""}`} />
        <span className={`status-toggle-thumb${isActive ? " active" : ""}`} />
      </label>
      <span className={`status-toggle-text${isActive ? " active" : ""}`}>
        {isActive ? "Active" : "Inactive"}
      </span>
    </div>
  );
}
