// Separetor component
// --------------------------------------------------
// Props:
// - style: style of separator
// - color: color of separator
// - size: size of separator
// - type: type of separator
// - align: alignment of separator
// - direction: direction of separator
// - weight: weight of separator
// - children: content to display
//
import React from 'react'
import { View, StyleSheet } from 'react-native'

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

const Separator = ({
  style,
  color = colors.white,
  size = spacing.s_1,
  type = 'default',
  align = 'left',
  direction = 'horizontal', // horizontal or vertical

  children,
}) => {
  const separatorStyle = {
    backgroundColor: color,
    height: direction === 'horizontal' ? size : '100%',
    width: direction === 'horizontal' ? '100%' : size,
  }

  return (
    <View style={[separatorStyle, style]}>
      {children && (
        <View
          style={[
            styles.content,
            {
              backgroundColor: colors.white,
              height: direction === 'horizontal' ? size : '100%',
              width: direction === 'horizontal' ? '100%' : size,
            },
          ]}
        >
          {children}
        </View>
      )}
    </View>
  )
}

const styles = StyleSheet.create({
  content: {
    position: 'absolute',
    justifyContent: 'center',
    alignItems: 'center',
  },

  horizontal: {
    flexDirection: 'row',
  },

  vertical: {
    flexDirection: 'column',
  },
})

export default Separator