import React, { useRef } from "react";
import { View, Text, TouchableOpacity, Linking } from "react-native";
import MapView, { Marker } from "react-native-maps";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import { useCurrentTrain } from "../stateBox/useCurrentTrain";
import { useNavigation } from "@react-navigation/native";
export default function CurrentTrainListView() {
  const { navigate } = useNavigation();
  const { currentTrain } = useCurrentTrain();
  return (
    <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
      {currentTrain && currentTrain.map((d) => <Text>{d.num}</Text>)}
      <TouchableOpacity
        style={{
          padding: 10,
          flexDirection: "row",
          borderColor: "white",
          borderWidth: 1,
          margin: 10,
          borderRadius: 5,
          alignItems: "center",
        }}
        onPress={() => navigate("menu")}
      >
        <View style={{ flex: 1 }} />
        <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
          閉じる
        </Text>
        <View style={{ flex: 1 }} />
      </TouchableOpacity>
    </View>
  );
}
const UsefulBox = (props) => {
  const { icon, backgroundColor, flex, onPressButton, children } = props;
  return (
    <TouchableOpacity
      style={{
        flex: flex,
        backgroundColor: backgroundColor,
        padding: 10,
        alignItems: "center",
        margin: 2,
      }}
      onPress={onPressButton}
    >
      <MaterialCommunityIcons name={icon} color="white" size={50} />
      <Text style={{ color: "white", fontWeight: "bold", fontSize: 18 }}>
        {children}
      </Text>
    </TouchableOpacity>
  );
};