'use client';

import { useSignal } from '@signal-js/nextjs/client';

function PrivacyControls() {
  const { optOut, optIn, hasOptedOut } = useSignal();
  const optedOut = hasOptedOut();

  return (
    <div>
      {optedOut ? (
        <button onClick={optIn}>Enable Tracking</button>
      ) : (
        <button onClick={optOut}>Disable Tracking</button>
      )}
    </div>
  );
}

const { optOut } = useSignal();

const handleDisableTracking = () => {
  optOut();
  alert('Tracking disabled');
};

const { optIn } = useSignal();

const handleEnableTracking = () => {
  optIn();
  alert('Tracking enabled');
};

const { hasOptedOut } = useSignal();

const isOptedOut = hasOptedOut();
if (isOptedOut) {
  console.log('User has opted out of tracking');
}

'use client';

import { useSignal } from '@signal-js/nextjs/client';
import { useState, useEffect } from 'react';

function PrivacySettings() {
  const { optOut, optIn, hasOptedOut } = useSignal();
  const [optedOut, setOptedOut] = useState(false);

  useEffect(() => {
    setOptedOut(hasOptedOut());
  }, [hasOptedOut]);

  const handleToggle = () => {
    if (optedOut) {
      optIn();
      setOptedOut(false);
    } else {
      optOut();
      setOptedOut(true);
    }
  };

  return (
    <div>
      <label>
        <input
          type="checkbox"
          checked={!optedOut}
          onChange={handleToggle}
        />
        Enable analytics tracking
      </label>
      <p>
        {optedOut
          ? 'Tracking is disabled. No events will be captured.'
          : 'Tracking is enabled. Events are being captured.'}
      </p>
    </div>
  );
}