import React from 'react';

import { TurnstileContainerId } from '../types/antiAbuse';

export interface NonAuthAntiAbuseProps {
  /**
   * ID of the Turnstile container element
   * Must match the containerId passed to useNonAuthAntiAbuse hook
   */
  containerId: TurnstileContainerId;
}

/**
 * NonAuthAntiAbuse Component
 *
 * Renders the hidden Turnstile container for anti-abuse verification.
 * This component should be used in conjunction with the useNonAuthAntiAbuse hook.
 *
 * Usage:
 * ```tsx
 * const { containerId, getAntiAbuseTokens } = useNonAuthAntiAbuse({
 *   containerId: TURNSTILE_CONTAINER_IDS.SPLASH_PAGE
 * });
 *
 * // Somewhere in your JSX
 * <NonAuthAntiAbuse containerId={containerId} />
 *
 * // When you need tokens
 * const { turnstileToken, honeypotSealed } = await getAntiAbuseTokens();
 * ```
 */
export const NonAuthAntiAbuse: React.FC<NonAuthAntiAbuseProps> = ({
  containerId,
}) => {
  return (
    <div id={containerId} style={{ display: 'none' }} aria-hidden='true' />
  );
};