import React, { CSSProperties } from "react";
import { Platform, Text, TextStyle, View, ViewStyle } from "react-native";

export const StationNameArea = (props) => {
  const { currentStation, isMatsuyama } = props;

  const stationNameAreaOverWrap: ViewStyle = {
    position: "absolute",
    top: "10%",
    alignContent: "center",
    flexDirection: "row",
    height: "50%",
    width: "100%",
  };
  const Station_JP: TextStyle = {
    letterSpacing: currentStation[0].Station_JP.length < 4 ? 15 : 0,
    // iOSの場合、letterSPacingで末尾の文字の後ろにもpaddingが入るため、paddingLeftを設定
    paddingLeft:  currentStation[0].Station_JP.length < 4 &&Platform.OS === "ios" ? 15 : 0,
    fontWeight: "bold",
    fontSize: parseInt(currentStation[0].Station_JP.length < 6 ? "40%" : "25%"),

    color: isMatsuyama ? "white" : "#005170",
  };
  const Station_EN: TextStyle = {
    fontWeight: "bold",
    fontSize: parseInt("15%"),
    color: isMatsuyama ? "white" : "#005170",
  };
  return (
    <View style={stationNameAreaOverWrap}>
      <View style={{ flex: 1 }} />
      <View style={{ alignItems: "center",flexDirection:"column" }}>
        <View style={{ flex: 1 }} />
        {/* <Text style={{fontWeight:"bold",fontSize:parseInt("15%"),color:"#005170"}}>{stationName.今.LineName}</Text>  */}
        <Text style={Station_JP}>{currentStation[0].Station_JP}</Text>
        <Text style={Station_EN}>{currentStation[0].Station_EN}</Text>
        <View style={{ flex: 1 }} />
      </View>
      <View style={{ flex: 1 }} />
    </View>
  );
};
