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

import { styles } from './style';
import LeftArrow from '../../../../../assets/icons/left-arrow.svg';
import RightArrow from '../../../../../assets/icons/right-arrow.svg';
import { Colors } from 'src/theme';

const Navigation = React.memo(({ direction }: { direction: 'prev' | 'next' }) => {
  return (
    <View
      style={[
        styles.navigationBtn,
        direction === 'prev' ? styles.prevComponent : styles.nextComponent
      ]}
    >
      {direction === 'prev' ? (
        <LeftArrow height={18} width={18} fill={Colors.DARK_BLUE} />
      ) : (
        <RightArrow height={18} width={18} fill={Colors.DARK_BLUE} />
      )}
    </View>
  );
});

export default Navigation;
