/* eslint-disable jsx-a11y/anchor-has-content, jsx-a11y/anchor-is-valid */
import React from 'react';

const Heading = (Tag) =>
  function TargetComponent({ id, ...props }) {
    if (!id) {
      return <Tag {...props} />;
    }
    return (
      <Tag {...props}>
        <a aria-hidden="true" tabIndex={-1} className="anchor" id={id} />
        {props.children}
        <a
          aria-hidden="true"
          tabIndex={-1}
          className="hash-link"
          href={`#${id}`}
          title="Direct link to heading"
        >
          #
        </a>
      </Tag>
    );
  };

export default Heading;