import React from 'react';
import {Pressable, StyleProp, Text, View, ViewStyle} from 'react-native';
import {Svg, Path} from 'react-native-svg';
import {ColorScheme} from './Design';
import { useRouter } from 'expo-router';

const BackButton = (props: any) => (
  <Svg
    width={64}
    height={64}
    viewBox="0 0 64 64"
    xmlns="http://www.w3.org/2000/svg"
    {...props}>
    <Path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M36.0002 38.3939L25.5862 27.9799L36.0002 17.5659L37.4142 18.9799L28.4142 27.9799L37.4142 36.9799L36.0002 38.3939Z"
      fill="white"
      fillOpacity={0.95}
    />
  </Svg>
);

// fill in logic for moving back later.
export default function ENavButtons(props: {
  back?: boolean;
  style?: StyleProp<ViewStyle>,
}) {
  const router = useRouter();
  return (
    <View
      style={[{
        paddingHorizontal: 0,
        margin:0,
        left:-24
      }]}>
      {props.back && <Pressable onPress={() => router.back()}><BackButton fill={ColorScheme.text[10]} /></Pressable>}
    </View>
  );
}