// @flow
import React, { type ComponentType } from 'react';

export type SemanticHeaderLevelCheckerProps<ComponentProps> = {|
  Component: ComponentType<ComponentProps>,
  ...ComponentProps,
|};
export const SemanticHeaderLevelChecker = <ComponentProps>({
  Component,
  ...props
}: SemanticHeaderLevelCheckerProps<ComponentProps>) => (
  <>
    {[1, 2, 3, 4, 5, 6, 'none', undefined].map((l) => (
      <Component headerLevel={l} {...props}>
        Semantic Header Level {l ?? 'default'}
      </Component>
    ))}
  </>
);
