import React from 'react';
import {
  IconArrowDown,
  IconArrowUp,
  IconMinus,
} from '@tabler/icons-react-native';
import {PositionDirection} from '@modules/prodev2/interfaces';
import {useTheme} from '@shared/theme';

interface Props {
  direction: PositionDirection;
  size?: number;
}

export function PositionArrow({direction, size}: Props) {
  const {theme, iconSizes} = useTheme();
  const iconSize = size ?? iconSizes.x4;

  if (direction === 'UP') {
    return <IconArrowUp size={iconSize} color={theme.graphics.success[600]} />;
  }
  if (direction === 'DOWN') {
    return <IconArrowDown size={iconSize} color={theme.graphics.error[600]} />;
  }
  return <IconMinus size={iconSize} color={theme.text.neutral.lighter} />;
}