import { FC } from 'react';

import {
  IconArrowDown,
  IconArrowUp,
  IconMinus,
} from '@material-hu/icons/tabler';
import { useTheme } from '@material-hu/mui/styles';

import { PositionDirection } from 'src/types/prode';

type PositionArrowProps = {
  direction: PositionDirection;
  color?: string;
};

const PositionArrow: FC<PositionArrowProps> = ({ direction, color }) => {
  const theme = useTheme();

  if (direction === 'UP') {
    return (
      <IconArrowUp
        size={16}
        color={color ?? theme.palette.newBase?.green[900]}
      />
    );
  }
  if (direction === 'DOWN') {
    return (
      <IconArrowDown
        size={16}
        color={color ?? theme.palette.newBase?.red[900]}
      />
    );
  }
  return (
    <IconMinus
      size={16}
      color={color ?? theme.palette.new.text.neutral.lighter}
    />
  );
};

export default PositionArrow;