'use client'
import { useState, useEffect } from 'react'
import { getWorkMode, setWorkMode } from '@/lib/work-mode'
import { Button } from '@/components/ui/button'
import { Monitor, Eye } from 'lucide-react'

export function WorkModeToggle() {
  const [enabled, setEnabled] = useState(false)

  useEffect(() => {
    setEnabled(getWorkMode())

    const handlePreferencesChange = () => {
      // Re-read work mode state when preferences change
      setEnabled(getWorkMode())
    }

    window.addEventListener('preferences-updated', handlePreferencesChange)
    return () => window.removeEventListener('preferences-updated', handlePreferencesChange)
  }, [])

  const toggle = () => {
    const newValue = !enabled
    setEnabled(newValue)
    setWorkMode(newValue)
    // Dispatch event so other components know work mode changed
    window.dispatchEvent(new CustomEvent('work-mode-changed', { detail: { enabled: newValue } }))
  }

  return (
    <Button variant="ghost" size="sm" onClick={toggle} title="Modo trabajo">
      {enabled ? <Eye className="h-4 w-4" /> : <Monitor className="h-4 w-4" />}
    </Button>
  )
}