import React, { DetailedHTMLProps, HTMLAttributes, useContext } from 'react';

import TypeContext, { TypeStyles } from './TypeContext';

export function useType(): TypeStyles {
  return useContext(TypeContext);
}

export function H1(
  props: DetailedHTMLProps<
    HTMLAttributes<HTMLHeadingElement>,
    HTMLHeadingElement
  >,
): React.ReactElement {
  const Type = useType();
  return <Type.H1 {...props} />;
}

export function H2(
  props: DetailedHTMLProps<
    HTMLAttributes<HTMLHeadingElement>,
    HTMLHeadingElement
  >,
): React.ReactElement {
  const Type = useType();
  return <Type.H2 {...props} />;
}

export function H3(
  props: DetailedHTMLProps<
    HTMLAttributes<HTMLHeadingElement>,
    HTMLHeadingElement
  >,
): React.ReactElement {
  const Type = useType();
  return <Type.H3 {...props} />;
}

export function P(
  props: DetailedHTMLProps<
    HTMLAttributes<HTMLParagraphElement>,
    HTMLParagraphElement
  >,
): React.ReactElement {
  const Type = useType();
  return <Type.P {...props} />;
}

export function Aside(
  props: DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>,
): React.ReactElement {
  const Type = useType();
  return <Type.Aside {...props} />;
}