// Complete custom text component for design system
// --------------------------------------------------
// Props:
// - children: text to display
// - color: color of text
// - size: size of text
// - weight: weight of text
// - style: style of text
// - align: alignment of text
// - type: type of text

import React from 'react'
import { Text as RNText } from 'react-native'

import { colors, fonts } from '../theme'

const Text = ({
  children,
  color = colors.black,
  size = fonts.body,
  weight = 'normal',
  style,
  align = 'left',
  type = 'default',

  mx,
  my,
  mt,
  mr,
  mb,
  ml,
  ...otherProps
}) => {
  const textStyle = {
    color,
    fontSize:
      type === 'default'
        ? fonts.body
        : type === 'h1'
        ? fonts.h1
        : type === 'h2'
        ? fonts.h2
        : type === 'h3'
        ? fonts.h3
        : type === 'h4'
        ? fonts.h4
        : type === 'h5'
        ? fonts.h5
        : type === 'h6'
        ? fonts.h6
        : type === 'caption'
        ? fonts.caption
        : size,
    fontWeight:
      type === 'default'
        ? 'normal'
        : type === 'caption'
        ? 'bold'
        : type === 'h6'
        ? 'bold'
        : weight,
    textAlign: align,
    marginHorizontal: mx,
    marginVertical: my,
    marginTop: mt,
    marginRight: mr,
    marginBottom: mb,
    marginLeft: ml,
  }

  return (
    <RNText style={[textStyle, style]} type={type} {...otherProps}>
      {children}
    </RNText>
  )
}

export default Text