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

import { responsiveHeight } from "../actions/responsiveSizes";

import { Fonts, Palette, Style } from "../styles";
import { icons } from "../assets";
import IconContainer from "./IconContainer";

const ItemRowList = ({
  title,
  action,
  icon = null,
  textStyle = {},
  addMarginTopFromPrevious = false,
  containerStyle = {},
  separatorPosition = "bottom",
}) => {
  return (
    <View
      style={{
        ...(addMarginTopFromPrevious ? { marginTop: responsiveHeight(5) } : {}),
        ...containerStyle,
      }}
    >
      {separatorPosition === "top" && (
        <View style={Style.separatorHorizontal} />
      )}

      <Pressable onPress={action} style={Style.containerSpaceBetween}>
        <View style={Style.containerRow}>
          {icon && <IconContainer icon={icon} />}

          <Text style={Fonts({ type: "section", style: textStyle })}>
            {title}
          </Text>
        </View>

        <Image source={icons.arrowRight} style={Style.iconSmall} />
      </Pressable>

      {separatorPosition === "bottom" && (
        <View style={Style.separatorHorizontal} />
      )}
    </View>
  );
};

export default ItemRowList;