import { View, Text } from "react-native";
import { useCurrentTrain } from "../../../stateBox/useCurrentTrain";
import LottieView from "lottie-react-native";
import { Ionicons } from "@expo/vector-icons";

export const Header = ({ getCurrentTrain }) => {
    const { currentTrainLoading, setCurrentTrainLoading } = useCurrentTrain();
    return (
      <View
        style={{
          alignContent: "center",
          alignItems: "center",
          width: "100%",
          marginVertical: 10,
          flexDirection: "row",
        }}
      >
        <View style={{ flex: 1 }}></View>
        <View style={{}}>
          <Text style={{ fontSize: 25, color: "white", fontWeight: "bold" }}>
            次の列車
          </Text>
          <Text style={{ fontSize: 15, color: "white" }}>Next Train</Text>
        </View>
        <View style={{ flex: 1, flexDirection: "row-reverse" }}>
          {currentTrainLoading == "loading" ? (
            <LottieView
              autoPlay
              loop
              style={{ width: 40, height: 40, marginRight: 30 }}
              source={require("../../../assets/51690-loading-diamonds.json")}
            />
          ) : currentTrainLoading == "error" ? (
            <Ionicons
              name="reload"
              color="white"
              size={30}
              style={{ marginRight: 30 }}
              onPress={() => {
                setCurrentTrainLoading("loading");
                getCurrentTrain();
              }}
            />
          ) : null}
        </View>
      </View>
    );
  };