import React, { useMemo } from 'react';

import { StyleDefinition } from './TypeContext';
import Typography from './Typography';

export default function HeadingLevel({
  level,
  children,
}: {
  level: number;
  children: React.ReactNode;
}): React.ReactElement {
  const styles: StyleDefinition = useMemo(() => ({ skipLevels: level }), [
    level,
  ]);
  return <Typography styles={styles}>{children}</Typography>;
}