import React from "react";
import { View, Text } from "react-native";

export const StateBox = ({ text, title, style, mode }) => (
  <View style={{ ...(mode == 2 ? boxStyle2 : boxStyle), ...style }}>
    <Text style={{ fontSize: 12, color: "#0099CC" }}>{title}</Text>
    <View style={{ flex: 1 }} />
    <View
      style={{
        color: "#0099CC",
        textAlign: "right",
        flexDirection: mode == 2 ? "row" : "column",
      }}
    >
      {text?.match("～") ? (
        <>
          <Text style={mode == 2 ? boxTextStyle2 : boxTextStyle}>
            {text.split("～")[0]}
          </Text>
          <Text style={{ color: "#0099CC", textAlign: "right" }}>～</Text>
          <Text style={mode == 2 ? boxTextStyle2 : boxTextStyle}>
            {text.split("～")[1]}
          </Text>
        </>
      ) : (
        <Text style={mode == 2 ? boxTextStyle2 : boxTextStyle}>{text}</Text>
      )}
    </View>
  </View>
);
const boxStyle = {
  flex: 1,
  backgroundColor: "white",
  borderRadius: 10,
  padding: 10,
  margin: 10,
};
const boxStyle2 = {
  flex: 1,
  backgroundColor: "white",
  borderRadius: 10,
  padding: 5,
  margin: 5,
};
const boxTextStyle2 = {
  fontSize: 18,
  color: "#0099CC",
  textAlign: "right",
};

const boxTextStyle = {
  fontSize: 25,
  color: "#0099CC",
  textAlign: "right",
};