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

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

function AsideBase(props: DefaultInterface): ReactElement {
  const newProps = Object.assign({}, {...props})

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

  return (
    <aside {...newProps}>
      { props.children }
    </aside>
  )
}

const Component: React.FunctionComponent<DefaultInterface> = styled(AsideBase)`
  width: 100%;
`

export const Aside: React.FunctionComponent<DefaultInterface> = (asideProps): ReactElement => {
  const {
    native
  } = asideProps

  if (native === true) {
    return <AsideBase {...asideProps} />
  }

  return <CustomComponent {...asideProps} callback={(props: DefaultInterface) => <Component {...props} /> } />
}