// Custom styled function that is typed with my theme interface
import styled, { CreateStyled } from '@emotion/styled'

import { ITheme } from '../theme'

export default styled as CreateStyled<ITheme>

// Style function interface in a Util module
declare module 'Util' {
  import { css } from '@emotion/core'
  import { ITheme } from '../util/theme'

  type CssType = typeof css

  export interface IStyleFunction<P = {}> {
    ( arg0: { theme: ITheme } & P): ReturnType<CssType> | false | null
  }
}

// Component code
type HeadingProps = {
  size?: FontSizes
}

const baseStyles: IStyleFunction<HeadingProps> = ({ theme }) => css`
  font-family: ${theme.fonts.heading};
`

const sizeStyles: IStyleFunction<HeadingProps> = ({
  theme,
  size = 'regular',
}) => {
  const [defaultSize, smallBreakPoint] = fontSizes[size]

  return css`
    font-size: ${theme.fontSizes[defaultSize]};

    ${theme.mq[0]} {
      font-size: ${theme.fontSizes[smallBreakPoint]};
    }
  `
}

const Heading = styled.h3<HeadingProps>(baseStyles, sizeStyles)

// Using the component
<Heading as="h5" size="tiny">
  This is an important heading
</Heading>