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

import { useAppSelector } from "@/store/hooks";
import { selectIsMobile } from "@/store/screen/screenSizeSlice";

interface InfoRowProps {
  label: string;
  value: string | ReactNode;
}

export const InfoRow = ({ label, value }: InfoRowProps) => {
  const isMobile = useAppSelector(selectIsMobile);

  return (
    <View className="flex-row mb-2 items-center">
      <Text
        className={`font-medium mb-2 mr-[2px] text-gray-600 ${
          isMobile ? "w-[50%]" : "w-[28%]"
        }`}
      >
        {label}:
      </Text>
      <Text
        className={`font-medium mb-2 text-black ${
          isMobile ? "w-[50%]" : "w-[72%]"
        }`}
      >
        {value || "-"}
      </Text>
    </View>
  );
};