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

const UserStatusToggle = ({ statusId, onChange, disabled }) => {
  const isActive = Number(statusId) === 1;

  return (
    <div className="status-toggle-container">
      <label
        className={`status-toggle-label ${disabled ? "disabled" : ""}`}
      >
        <input
          type="checkbox"
          className="status-toggle-input"
          checked={isActive}
          onChange={onChange}
          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>
  );
};

export default UserStatusToggle;

