import { useDeveloperMode } from '../context/DeveloperModeContext'

export default function Settings() {
  const { isDeveloperMode, setDeveloperMode } = useDeveloperMode()

  return (
    <div>
      
      <div className="bg-white rounded-lg shadow p-6 mb-4">
        <h2 className="text-lg font-semibold text-gray-900 mb-4">Developer Options</h2>
        
        <div className="flex items-center justify-between py-3 border-b border-gray-200">
          <div className="flex-1">
            <label htmlFor="developer-mode" className="text-sm font-medium text-gray-700">
              Developer Mode
            </label>
            <p className="text-xs text-gray-500 mt-1">
              Enable developer features. Additional features will be available when enabled.
            </p>
          </div>
          <div className="ml-4">
            <label className="relative inline-flex items-center cursor-pointer">
              <input
                type="checkbox"
                id="developer-mode"
                checked={isDeveloperMode}
                onChange={(e) => setDeveloperMode(e.target.checked)}
                className="sr-only peer"
              />
              <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
            </label>
          </div>
        </div>
      </div>
    </div>
  )
}

