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

import { Fonts, gutters, Style } from "../styles";

const SectionTextHeader = ({
  title = "",
  rightText = "",
  rightTextStyle = {},
  subTitle = "",
  containerStyle = {},
}) => {
  return (
    <View style={{ ...containerStyle }}>
      <View
        style={{ ...Style.containerSpaceBetween, marginBottom: gutters / 2 }}
      >
        <Text
          style={{
            ...Fonts({
              type: "section",
            }),
          }}
        >
          {title}
        </Text>

        <Text
          style={{
            ...Fonts({
              type: "section",
            }),
            ...rightTextStyle,
          }}
        >
          {rightText}
        </Text>
      </View>

      {subTitle?.length > 0 && (
        <Text
          style={{
            ...Fonts({ type: "default", style: { opacity: 0.5 } }),
            marginBottom: gutters / 2,
          }}
        >
          {subTitle}
        </Text>
      )}
    </View>
  );
};

export default SectionTextHeader;