import React, { useContext } from 'react';
import { View, ViewStyle } from 'react-native';
import { ApplicationContext } from '../Context';
import { Spacing } from '../Consts';
import Svg, { Line } from 'react-native-svg';

export interface DashDividerProps {
  /**
   * Custom styles for dash divider
   */
  style?: ViewStyle;
}

const DashDivider: React.FC<DashDividerProps> = ({ style }) => {
  const { theme } = useContext(ApplicationContext);
  const borderColor = theme.colors.border.default;

  return (
    <View
      style={[
        {
          width: '100%',
          height: 1,
          marginVertical: Spacing.XS,
        },
        style,
      ]}
    >
      <Svg height="1" width="100%">
        <Line
          x1="0"
          y1="0"
          x2="100%"
          y2="0"
          stroke={borderColor}
          strokeWidth="1"
          strokeDasharray={`4, 4`}
          strokeLinecap={'round'}
          strokeLinejoin={'miter'}
        />
      </Svg>
    </View>
  );
};

export { DashDivider };