"use client"

import { useState } from "react"
import { Pencil, Eye } from "lucide-react"

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

export function EditModeToggle({ className, onToggle }: EditModeToggleProps) {
  const [isEditMode, setIsEditMode] = useState(false)

  const handleToggle = () => {
    const newMode = !isEditMode
    setIsEditMode(newMode)
    onToggle?.(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>
  )
}