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

export interface DividerProps {
  /**
   * Custom styles for divider
   */
  style?: ViewStyle;

  /**
   * Enable margin vertical 4px
   */
  useMargin?: boolean;

  type?: 'dash' | 'default';
}

const Divider: React.FC<DividerProps> = ({
  style,
  useMargin = true,
  type = 'default',
}) => {
  const { theme } = useContext(ApplicationContext);

  if (type === 'dash') return <DashDivider style={style} />;

  return (
    <View
      style={[
        style,
        {
          height: 1,
          width: '100%',
          backgroundColor: theme.colors.border.default,
          marginVertical: useMargin ? Spacing.XS : 0,
        },
      ]}
    />
  );
};

export { Divider };