import React from 'react'
import {
    View,
    StyleSheet
} from 'react-native'

const Line = (props:Props) => {
    const{
        height = 1,
        borderColor = '#ccc',
        borderStyle = 'dotted',
        borderWidth = 2,
        style={}
    } = props;

    return (
        <View style={{...styles.lineBox,...style,height}} >
            <View style={{...styles.line,borderColor,borderStyle,borderWidth}} />
        </View>
    )
}

const VLine = (props:Props) => {
    const{
        width = 1,
        borderColor = '#ccc',
        borderStyle = 'dotted',
        borderWidth = 2,
        style={}
    } = props;

    return (
        <View style={{...styles.vlineBox,...style,width}} >
            <View style={{...styles.vline,borderColor,borderStyle,borderWidth}} />
        </View>
    )
}

const styles = StyleSheet.create({
    lineBox:{
        width:'100%',
        overflow: 'hidden'
    },
    line: {
        width:'100%',
        height: 1,
        borderRadius: .1
    },

    vlineBox:{
        height:'100%',
        overflow: 'hidden'
    },
    vline: {
        height:'100%',
        width: 1,
        borderRadius: .1
    }
});

export { Line, VLine }