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

interface Props {
  size: number;
  color: string;
  axis?: 'horizontal' | 'vertical';
  style?: ViewStyle;
  width?: number;
}

const DashedLine: FunctionComponent<Props> = ({
  size,
  color,
  axis = 'horizontal',
  style = {},
  width = 2,
}) => {
  const _style = {...style};

  if (axis === 'vertical') {
    _style.transform = [{rotate: '90deg'}];
  }

  return (
    <View style={StyleSheet.flatten([styles.container, _style])}>
      <View
        style={StyleSheet.flatten([
          styles.innerContainer,
          {borderColor: color, borderWidth: width},
        ])}>
        <View style={{height: size, width: size}} />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    overflow: 'hidden',
  },
  innerContainer: {
    borderStyle: 'dashed',
    margin: -2,
    marginTop: 10,
  },
});

export default DashedLine;