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

type StatItem = {
	title: string;
	value: string;
};

type StatListProps = {
	items: StatItem[];
	style?: object;
};

const StatList: React.FC<StatListProps> = ({ items, style }) => {
	return (
		<View style={[styles.container, style]}>
			{items.map((item, index) => (
				<View key={index} style={styles.item}>
					<Text style={styles.title}>{item.title}</Text>
					<Text style={styles.value}>{item.value}</Text>
				</View>
			))}
		</View>
	);
};

const styles = StyleSheet.create({
	container: {
		flexDirection: "column",
		flex: 1,
		padding: 5,
	},
	item: {
		borderLeftWidth: 0.5,
		borderRightColor: "lightgrey",
		marginBottom: 10,
	},
	title: {
		fontSize: 16,
		color: "grey",
		textAlign: "center",
	},
	value: {
		fontSize: 28,
		fontWeight: "bold",
		textAlign: "center",
	},
});

export default StatList;