import { TouchableOpacity, View, Text, StyleSheet } from "react-native";
import { LIGHT_THEME } from "../const/theme";
import { FontAwesome, MaterialIcons } from "@expo/vector-icons";

interface SlideControlProps {
  onNext: () => void;
  onPrevious?: () => void;
  onFinish: () => void;
  isLast: boolean;
  isFirst: boolean;
}

export const SlideControl = ({
  onNext,
  onPrevious,
  onFinish,
  isFirst,
  isLast,
}: SlideControlProps) => {
  return (
    <View style={styles.container}>
      {isFirst || !onPrevious ? <View/> :  (
        <TouchableOpacity style={styles.button} onPress={onPrevious}>
          <MaterialIcons
            name="keyboard-arrow-left"
            size={24}
            color={LIGHT_THEME.color.primary}
          />
          <Text style={styles.text}>Previous</Text>
        </TouchableOpacity>
      )}
      {isLast ? (
        <TouchableOpacity style={styles.button} onPress={onFinish}>
          <Text style={styles.text}>Finish</Text>
        </TouchableOpacity>
      ) : (
        <TouchableOpacity style={styles.button} onPress={onNext}>
          <Text style={styles.text}>Next</Text>
          <MaterialIcons
            name="keyboard-arrow-right"
            size={24}
            color={LIGHT_THEME.color.primary}
          />
        </TouchableOpacity>
      )}
    </View>
  );
};

export const styles = StyleSheet.create({
  container: {
    width: "100%",
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
  },
  button: {
    height: 20,
    flexDirection: "row",
    justifyContent: "center",
  },
  text: {
    color: LIGHT_THEME.color.primary,
    fontWeight: "bold",
    fontSize: 16,
  },
});
