import React, {
  ReactElement
} from 'react'
import styled from 'styled-components'

import {
  DefaultInterface,
  ComponentResponsiveStyled
} from "../../common/helpers/Theme"
import {
  CustomComponent
} from "../"

interface H4Interface extends DefaultInterface {
  styles?: any
}

function H4Base(props: H4Interface): ReactElement {
  const {
    children
  } = props

  const newProps = Object.assign({}, {...props})

  delete newProps.children
  delete newProps.themed
  delete newProps.native

  return (
    <h4 {...newProps}>
      { children }
    </h4>
  )
}

const Component: React.FunctionComponent<H4Interface> = styled(H4Base)`
  ${ props => ComponentResponsiveStyled(props, 'h4') }

  text-align: left;
`

export const H4: React.FunctionComponent<H4Interface> = (h4Props): ReactElement => {
  const {
    native = false
  } = h4Props

  return !native
    ? <CustomComponent {...h4Props} callback={(props: H4Interface) => <Component {...props} /> } />
    : <H4Base {...h4Props} />
}