import {StyleSheet, Text, View} from 'react-native';
import React, { useContext } from 'react';
import {TouchableWithoutFeedback} from 'react-native-gesture-handler';
import EntypoIcon from 'react-native-vector-icons/Entypo'
import { horizontalScale, moderateScale, verticalScale } from '../../../constants/metrics';
import colors from '../../../constants/colors';
import { ThemeContext } from '../../../context/theme.context';


const CircularPrimaryBackButton = ({onPress}) => {
  const theme = useContext(ThemeContext)
  const currentTheme = theme.state.theme
  const styles = StyleSheet.create({
    buttonContainer: {
      borderRadius: 128,
      
      height: 'auto',
      width: horizontalScale(40),
      backgroundColor: currentTheme === "light" ? colors().white : colors().dominant_variant,
      borderColor: colors().recessive_variant,
      borderWidth: 2,
      paddingVertical: moderateScale(8),
      paddingHorizontal: moderateScale(8)
    },
  });
  
  return (
    <TouchableWithoutFeedback onPress={onPress}>
      <View style={styles.buttonContainer}>
        <EntypoIcon
          color={currentTheme === "light" ? colors().secondaryColor : colors().white}
          size={20}
          name="chevron-thin-left"
        />
      </View>
    </TouchableWithoutFeedback>
  );
};

export default CircularPrimaryBackButton;


