// Copyright: © 2026 TWWIM UG. All rights reserved. (www.twwim.com)
/**
 * EnabledToggle — master on/off switch for the Attention Anchoring branch.
 *
 * Operates on the `form.attention.enabled` field; the per-device visibility
 * toggles live in VisibilitySection above.
 *
 * @layer Presentation
 */

import type { TFunction } from '../lib/constants';

interface EnabledToggleProps {
  enabled: boolean;
  onChange: (enabled: boolean) => void;
  t: TFunction;
}

export function EnabledToggle({ enabled, onChange, t }: EnabledToggleProps) {
  return (
    <div className="bg-white border border-gray-200 rounded-lg shadow-sm p-5 flex items-center justify-between">
      <div>
        <h2 className="text-sm font-semibold text-gray-900">
          {t('tenants.pluginSettings.attentionEnabled')}
        </h2>
        <p className="text-xs text-gray-500 mt-0.5">
          {t('tenants.pluginSettings.attentionEnabledHint')}
        </p>
      </div>
      <label className="inline-flex items-center cursor-pointer">
        <input
          type="checkbox"
          checked={enabled}
          onChange={(e) => onChange(e.target.checked)}
          className="sr-only peer"
        />
        <span className="relative w-11 h-6 bg-gray-200 rounded-full peer peer-checked:bg-cyan-600 transition-colors after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-transform peer-checked:after:translate-x-5" />
      </label>
    </div>
  );
}