import { useCurrentTrain } from "@/stateBox/useCurrentTrain";
import { View, Text } from "react-native";
import { useThemeColors } from "@/lib/theme";
import { Ionicons } from "@expo/vector-icons";
import { FixedStation } from "./FixedStationBox";

export const FixedNearestStationBox = () => {
  const { colors } = useThemeColors();
  const { nearestStationID } = useCurrentTrain();

  if (!nearestStationID) {
    return (
      <View
        style={{
          flex: 1,
          flexDirection: "row",
          backgroundColor: colors.background,
          alignItems: "center",
          paddingHorizontal: 12,
          borderBottomWidth: 2,
          borderBottomColor: colors.textAccent,
        }}
        pointerEvents="box-none"
      >
        <Ionicons name="navigate-circle-outline" size={20} color={colors.textAccent} />
        <Text style={{ marginLeft: 6, color: colors.textAccent, fontSize: 14 }}>
          現在地を取得中...
        </Text>
      </View>
    );
  }

  return <FixedStation stationID={nearestStationID} />;
};