import React from 'react';
import styled from 'styled-components';
import theme, { ColorValue } from 'theme';
import { MarginProps } from 'utils/style';
const FONT_SIZE = {
  displayTitle: 40,
  primaryHeading: 34,
  secondaryHeading: 28,
  leadText: 20,
  paragraph: 16,
  paragraphSmall: 14,
  xs: 12
};
const FONT_WEIGHT = {
  regular: 400,
  medium: 500,
  semiBold: 600,
  bold: 700
};
const SPACING = {
  xxs: 4,
  xs: 8,
  s: 16,
  m: 24,
  l: 32,
  xl: 40,
  xxl: 48,
  jumbo: 80
};
const PrimaryHeading = styled.h1`
  font-size: ${FONT_SIZE.primaryHeading}px;
  line-height: ${SPACING.xl}px;
  letter-spacing: -0.4px;
  font-weight: ${FONT_WEIGHT.regular};
`;
const SecondaryHeading = styled.h2`
  font-size: ${FONT_SIZE.secondaryHeading}px;
  line-height: ${SPACING.l}px;
  letter-spacing: -0.4px;
  font-weight: ${FONT_WEIGHT.regular};
`;
type TypographyProps = {
  variant:
    | 'primaryHeading'
    | 'secondaryHeading'
  children?: React.ReactNode;
  color?: ColorValue;
  as?: StyledComponentProps<>; // HERE: what is the type to use here? I want to accept an `as` prop to my `<Typography />` component.
} & MarginProps;
const components = {
  primaryHeading: PrimaryHeading,
  secondaryHeading: SecondaryHeading
};
const Typography = ({ variant, children, color, as }: TypographyProps) => {
  const Comp = components[variant];
  return (
    <Comp color={color} {...(as ? { as } : {})}>
      {children}
    </Comp>
  );
};
Typography.defaultProps = {
  children: null,
  color: theme.palette.black,
  as: null
};
export default Typography;