import React, { createElement } from 'react';

import type { PropsWithChildren } from 'react';

import { concatClassNames } from '@redocly/theme/core/utils';
import { LinkIcon } from '@redocly/theme/icons/LinkIcon/LinkIcon';

/**
 * Class name for all MD tags
 */
const mdClassName = 'md';

export function Heading({
  level,
  id,
  children,
  'data-source': dataSource,
  'data-hash': dataHash,
  className,
}: PropsWithChildren<{
  level: number;
  id: string;
  'data-source'?: string;
  'data-hash'?: string;
  className?: string;
}>): JSX.Element {
  const linkEl = (
    <a
      aria-label={`link  to ${id}`}
      href={`#${id}`}
      className={concatClassNames('anchor', 'before')}
    >
      <LinkIcon size="14px" color="--heading-anchor-color" />
    </a>
  );

  return createElement(
    `h${level}`,
    {
      id,
      className: concatClassNames('heading-anchor', mdClassName, className),
      'data-component-name': 'Markdoc/Heading/Heading',
      'data-source': dataSource,
      'data-hash': dataHash,
    },
    <>
      {linkEl}
      {children}
    </>,
  );
}