import { Text, View } from "react-native";
import React from "react";
import { external } from "../../styles/externalStyle";
import { commonStyles } from "../../styles/commonStyle";
import { useValues } from "@src/utils/context/index";
import { DetailContainerProps } from "../type";
import { appColors, fontSizes } from "@src/themes";

export function DetailContainer({ title, value }: DetailContainerProps) {
  const { viewRTLStyle, textRTLStyle, isDark } = useValues();
  return (
    <View
      style={[
        ,
        external.js_space,
        external.ai_center,
        { flexDirection: viewRTLStyle },
      ]}
    >
      <Text
        style={[
          commonStyles.regularText,
          { textAlign: textRTLStyle, fontSize: fontSizes.FONT17 },
        ]}
      >
        {title}
      </Text>
      <Text
        style={[
          commonStyles.regularText,
          {
            color: isDark ? appColors.whiteColor : appColors.blackColor,
            textAlign: textRTLStyle,
            fontSize: fontSizes.FONT17,
          },
        ]}
      >
        {value}
      </Text>
    </View>
  );
}
