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

const descriptionStyle: TextStyle = {
  fontSize: parseInt("16%"),
  fontWeight: "bold",
};

type Props = {
  info: string;
  numberOfLines?: number;
  onClick?: () => void;
  onLongClick?: () => void;
};
export const Description:FC<Props> = ({ info, numberOfLines = 0, onClick, onLongClick }) => (
  <TouchableOpacity
    style={{
      alignContent: "center",
      alignItems: "center",
      width: "94%",
      marginVertical: 5,
      marginHorizontal: "3%",
      backgroundColor: "#000",
      flexDirection: "row",
      overflow: "hidden",
    }}
    onPress={onClick}
    onLongPress={onLongClick}
  >
    <View style={{ flex: 4, flexDirection: "row" }}>
      {numberOfLines == 1 ? (
        <Text style={{ ...descriptionStyle, color: "red" }}>
          運行情報 &gt;{" "}
        </Text>
      ) : (
        <Text style={{ ...descriptionStyle, color: "green" }}> &gt; </Text>
      )}

      <Text
        style={{ ...descriptionStyle, color: "green" }}
        numberOfLines={numberOfLines}
      >
        {info}
      </Text>
    </View>
  </TouchableOpacity>
);