import styled from 'styled-components';

import { Colors, Sizes, TextHelper } from '../index';

export interface IProps {
  fontDimension?: number;
  fontColor?: string;
  variant?: string;
  margin?: string|number;
  children: any;
  css?: string;
}

export default {
  H1: styled.h1`
    ${(props: IProps) => TextHelper.fontPropertiesFactory(props, {
      defaultColor: Colors.codGray,
      defaultFontSize: Sizes.s6,
      defaultVariant: 'medium',
      defaultMargin: `${Sizes.s6}px 0`,
    })}
  `,
  H2: styled.h2`
    ${(props: IProps) => TextHelper.fontPropertiesFactory(props, {
      defaultColor: Colors.codGray,
      defaultFontSize: Sizes.s5,
      defaultVariant: 'medium',
      defaultMargin: 0,
    })}
  `,
  H3: styled.h3`
  ${(props: IProps) => TextHelper.fontPropertiesFactory(props, {
    defaultColor: Colors.codGray,
    defaultFontSize: Sizes.s4,
    defaultVariant: 'medium',
    defaultMargin: 0,
  })}
`,
  H5: styled.h5`
    ${(props: IProps) => TextHelper.fontPropertiesFactory(props, {
      defaultColor: Colors.codGray,
      defaultFontSize: Sizes.s3,
      defaultVariant: 'medium',
      defaultMargin: `${Sizes.s3}px 0 ${Sizes.s1}px`,
    })}
  `,
};