import { FontAwesome } from "@expo/vector-icons";
import React from 'react';
import { StyleSheet, TouchableOpacity, View } from 'react-native';
import { colors } from "../../../utils/GlobalUtils";

interface FloorChangeButtonProps {
  floorNumber: number;
  onPress: () => void;
  icon: string;
}

const FloorChangeButton = (props) => {
    if (props.floorNumber != 0) {
      // return arrow icon
        return (
            <TouchableOpacity style={styles.arrowButton} onPress={props.onPress} >
              <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
                <FontAwesome style={{ marginLeft: (props.floorNumber == 1 ? 5 : -5) }} color={"white"} size={20} name={props.icon} />
              </View>
            </TouchableOpacity>
        )
      }
      else {
        return (
          // return empty space
          <View style={{ flex: 1.2, marginHorizontal: 7, height: 53.5, maxWidth: 60, borderRadius: 10 }}/>
        )
      }
  }


const styles = StyleSheet.create({
    arrowButton: {
        flex: 1,
        backgroundColor: colors.red,
        height: 53.5,
        borderRadius: 8,
      },
})



export default FloorChangeButton