import React from 'react';
import { StyleSheet } from 'react-native';

import { ColorsWithHue } from '../../../theme/primitives/colors';
import { Box } from '../Box/Box';

interface DividerProps {
  orientation?: 'horizontal' | 'vertical';
  color?: ColorsWithHue;
  size?: number;
}

const DEFAULT_SIZE = StyleSheet.hairlineWidth;

export const Divider = ({
  orientation = 'horizontal',
  size = DEFAULT_SIZE,
  color = 'grey.300',
}: DividerProps) => {
  const isHorizontal = orientation === 'horizontal';

  return (
    <Box
      bgColor={color}
      height={isHorizontal ? `${size}px` : undefined}
      width={isHorizontal ? undefined : `${size}px`}
      aria-orientation={orientation}
      // @ts-ignore Supported only on the Web platform
      accessibilityRole="separator"
      accessible
    />
  );
};