import React from 'react';
import { TouchableOpacity } from 'react-native';
import { Box } from '../Box';
import { colors, fonts } from '../../theme/theme';
import { Text } from '../Text';
import { ArrowLeft, ArrowRight } from 'phosphor-react-native';
import { Normalize } from '../../utils/normalize';
import type { IOnBoardingFooterProps } from './onboarding';

export const Footer = ({
  handlePrev,
  handleNext,
  handleFinish,
  currentSlideIndex,
  totalSlides,
}: IOnBoardingFooterProps) => {
  return (
    <Box
      flexDirection={'row'}
      px={'spacing-s'}
      justifyContent={'space-between'}
    >
      <TouchableOpacity onPress={handlePrev} disabled={currentSlideIndex === 0}>
        <Box
          bg={'gray5'}
          justifyContent={'center'}
          alignItems={'center'}
          height={48}
          width={48}
          borderRadius={4}
        >
          <ArrowLeft size={24} color={colors.yankeesBlue} />
        </Box>
      </TouchableOpacity>
      {currentSlideIndex + 1 === totalSlides ? (
        <TouchableOpacity onPress={handleFinish}>
          <Box
            flexDirection={'row'}
            bg={'green'}
            padding={'spacing-s'}
            height={48}
            alignItems={'center'}
            borderRadius={4}
          >
            <Text
              variant={'body'}
              lineHeight={Normalize(16)}
              fontFamily={fonts.caustenRoundBold}
              color={'white'}
              paddingRight={'spacing-xs'}
            >
              Comencemos
            </Text>
            <ArrowRight size={24} color={colors.white} />
          </Box>
        </TouchableOpacity>
      ) : (
        <Box flexDirection={'row'} alignItems={'center'}>
          <Text
            variant={'body'}
            fontFamily={fonts.caustenRoundBold}
            color={'yankeesBlue'}
            paddingRight={'spacing-s'}
          >
            Continuar
          </Text>
          <TouchableOpacity onPress={handleNext}>
            <Box
              bg={'green'}
              padding={'spacing-xs'}
              height={48}
              width={48}
              justifyContent={'center'}
              alignItems={'center'}
              borderRadius={4}
            >
              <ArrowRight size={24} color={colors.white} />
            </Box>
          </TouchableOpacity>
        </Box>
      )}
    </Box>
  );
};