import React from 'react'
import { MaterialIcon } from 'atoms/MaterialIcon'
import { StyledSeparator } from './styled'

export interface SeparatorProps {
  arrow?: boolean
  pipe?: boolean
  className?: string
}

class Separator extends React.PureComponent<SeparatorProps> {
  static defaultProps = {
    arrow: false,
    pipe: true,
    className: '',
  }

  render() {
    const { arrow, pipe, children, className } = this.props

    // <ArrowIcon />
    const child = children ? (
      children
    ) : arrow ? (
      <MaterialIcon type="right" />
    ) : (
      '|'
    )

    return (
      <StyledSeparator arrow={arrow} className={className}>
        {child}
      </StyledSeparator>
    )
  }
}

export { Separator }
export default Separator