import React from 'react';

interface HoneypotFieldProps {
  value: string;
  onChange: (value: string) => void;
  name?: string;
}

/**
 * Honeypot field - hidden field that should never be filled by humans
 * Bots often fill all fields, so if this is filled, it's likely a bot
 */
const HoneypotField: React.FC<HoneypotFieldProps> = ({
  value,
  onChange,
  name = 'website',
}) => {
  return (
    <div
      style={{
        position: 'absolute',
        left: '-9999px',
        width: '1px',
        height: '1px',
        overflow: 'hidden',
        opacity: 0,
        pointerEvents: 'none',
      }}
      aria-hidden="true"
    >
      <label htmlFor={name} style={{ display: 'none' }}>
        Please leave this field empty
      </label>
      <input
        type="text"
        id={name}
        name={name}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        autoComplete="off"
        tabIndex={-1}
        style={{
          position: 'absolute',
          left: '-9999px',
        }}
      />
    </div>
  );
};

export default HoneypotField;

