import { useState } from 'react';
import { togglePublishStatus } from "./UniversalCrudHelpers";

const ToggleStatus = ({ model, isPublished: initialIsPublished, endpoint, itemId, token, onToggleChange }) => {
  const [isPublishing, setIsPublishing] = useState(false);
  const [isPublished, setIsPublished] = useState(initialIsPublished);

  const handleToggle = async (e) => {
    e.stopPropagation();
    setIsPublishing(true);
    confirm("Are you sure you want to change public status to " ,  isPublishing)
    try {
        await togglePublishStatus(model, endpoint, itemId, token);  // Here, we're using the 'model' prop
        const newStatus = !isPublished;
        setIsPublished(newStatus);
        onToggleChange(newStatus);
    } catch (error) {
        console.error("Error toggling status:", error);
    } finally {
        setIsPublishing(false);
    }
  };

  return (
<div 
  className={`relative w-12 h-4 transition-colors duration-300 ${isPublished ? 'bg-blue-400' : 'bg-black'} rounded-full`}
>
  <button 
    onClick={handleToggle} 
    className={`absolute top-0 left-0 h-4 w-4 bg-white rounded-full shadow-md transition-transform duration-300`}
    disabled={isPublishing}
    style={{
      transform: isPublished ? 'translateX(2rem)' : 'translateX(0)',
      transition: 'transform 0.3s ease-in-out'
    }}
  >
    {isPublishing && <span className="loader"></span>}
  </button>
</div>

  );
};

export default ToggleStatus;