// @flow
import React from 'react';
import styled from 'styled-components';
import type { SemanticHeaderProps } from './semantic-header.proptypes';
import { presentation } from './semantic-header.css-rules';

/**
 * Internal component used to implement the semantic-header-level mixin.
 */

const UnstyledH1 = styled.h1`
  ${presentation}
`;

const UnstyledH2 = styled.h2`
  ${presentation}
`;

const UnstyledH3 = styled.h3`
  ${presentation}
`;

const UnstyledH4 = styled.h4`
  ${presentation}
`;

const UnstyledH5 = styled.h5`
  ${presentation}
`;

const UnstyledH6 = styled.h6`
  ${presentation}
`;

const UnstyledHNone = styled.div`
  ${presentation}
`;

const mapping = {
  [String(1)]: UnstyledH1,
  [String(2)]: UnstyledH2,
  [String(3)]: UnstyledH3,
  [String(4)]: UnstyledH4,
  [String(5)]: UnstyledH5,
  [String(6)]: UnstyledH6,
  none: UnstyledHNone,
};

export const SemanticHeader = ({
  headerLevel,
  ...props
}: SemanticHeaderProps) => {
  const Component = mapping[headerLevel];
  return <Component {...props} />;
};

SemanticHeader.displayName = 'SemanticHeader';
