import React from 'react';
import {View, ViewProps} from 'react-native';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

interface Props extends ViewProps {
  color?: string;
  direction?: 'horizontal' | 'vertical';
}

export function Divider({color, direction = 'horizontal', ...props}: Props) {
  const {theme} = useTheme();
  const isHorizontal = direction === 'horizontal';

  return (
    <View {...props}>
      <View
        style={[
          isHorizontal ? styles.horizontalDivider : styles.verticalDivider,
          {backgroundColor: color || theme.border.neutral.default},
        ]}
      />
    </View>
  );
}