const RecaptchaPlaceholder = ({ error = '' }) => (
  <div className={`rounded-md border bg-background px-4 py-3 ${error ? 'border-red-500' : 'border-border'}`}>
    <div className="flex items-center justify-between gap-4">
      <div>
        <p className="text-sm font-semibold text-primary-navy">Security verification</p>
        <p className="mt-1 text-xs text-soft-text">Google reCAPTCHA placeholder</p>
      </div>
      <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-md border border-border bg-white">
        <span className="h-4 w-4 rounded-sm border-2 border-primary-blue" aria-hidden="true" />
      </div>
    </div>
    {error && <p className="mt-2 text-xs text-red-500">{error}</p>}
  </div>
)

export default RecaptchaPlaceholder
