"use client"

import { useEffect, useState } from "react"

interface EditModeToggleProps {
  className?: string
  toggle?: (isEditMode: boolean) => void
  isActive?: boolean
}

export function EditModeToggle({ className, toggle, isActive }: EditModeToggleProps) {
  const [isEditMode, setIsEditMode] = useState(isActive ?? false);
  
  useEffect(() => {
    setIsEditMode(isActive ?? false);
  }, [isActive]);

  const handleToggle = () => {
    const newMode = !isEditMode;
    setIsEditMode(newMode);
    toggle?.(newMode);
  };

  return (
    <div className={`flex items-center gap-2 ${className}`}>
      <input type="checkbox" onChange={handleToggle} checked={isEditMode} className="toggle toggle-xs" />
      <label htmlFor="toggle" className="label-text">Edit Mode</label>
    </div>
  );
}