railbird-gql/src/component/session-card/session-card-stats-row-container.tsx

import React from "react";
import { StyleSheet, View } from "react-native";
import SessionCardStat from "./session-card-stat";

const SessionCardStatsRowContainer = ({
	makePercent,
	medianRun,
	duration,
	shotPacing,
}) => {
	return (
		<View style={styles.statsContainer}>
			<View>
				<SessionCardStat
					displayName="Make Percent"
					aggregateStat={makePercent}
					numberFormat="%"
				/>
			</View>
			<View style={styles.verticalSpacer} />
			<View>
				<SessionCardStat
					displayName="Median Run"
					aggregateStat={medianRun}
					numberFormat=""
				/>
			</View>
			<View style={styles.verticalSpacer} />
			<View>
				<SessionCardStat
					displayName="Time Played"
					aggregateStat={duration}
					numberFormat=""
				/>
			</View>
			<View style={styles.verticalSpacer} />
			<View>
				<SessionCardStat
					displayName="Shot Pacing"
					aggregateStat={shotPacing}
					numberFormat=""
				/>
			</View>
		</View>
	);
};

const styles = StyleSheet.create({
	statsContainer: {
		flexDirection: "row",
		justifyContent: "space-around",
		margin: 16,
		textAlign: "center",
	},
	verticalSpacer: {
		width: 0.5,
		backgroundColor: "#A3A3A3",
		height: "75%",
		marginHorizontal: 12,
	},
});

export default SessionCardStatsRowContainer;