import { TouchableOpacity, View } from 'react-native'
import React from 'react'
import Icons from '../../utils/icons/icons'
import { useNavigation, useTheme } from '@react-navigation/native'
import commanStyles from '../../style/commanStyles'
import { useValues } from '../../utils/context'
import appColors from '../../theme/appColors'
import { windowHeight, windowWidth } from '../../theme/appConstant'

export function BackButton() {
  const navigation = useNavigation()
  const { colors } = useTheme()
  const { isDark } = useValues()
  const gotoBack = () => {
    navigation.goBack()
  }
  return (
    <View
      style={{
        height: windowHeight(10),
        width: windowWidth(100),
        backgroundColor: isDark ? appColors.primaryFont : appColors.white,
        borderBottomEndRadius: windowWidth(5),
        borderBottomStartRadius: windowWidth(5),
        justifyContent: 'center',
        paddingHorizontal: windowWidth(4),
        elevation: 1,
      }}
    >
      <TouchableOpacity
        activeOpacity={0.7}
        onPress={gotoBack}
        style={[
          commanStyles.backButtonMain,
          {
            backgroundColor: colors.card,
            borderColor: isDark ? appColors.darkborder : appColors.border,
          },
        ]}
      >
        <Icons.Back color={colors.text} />
      </TouchableOpacity>
    </View>
  )
}
