import React from "react";
import { StyleProp, StyleSheet, Text, View, ViewStyle } from "react-native";
import { borders } from "../../styles";

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

type StatListProps = {
	items: StatItem[];
	style?: StyleProp<ViewStyle>;
};

const StatList: React.FC<StatListProps> = ({ items, style }) => {
	return (
		<View style={[styles.container, style]}>
			{items.map((item, index) => (
				<View key={`${item.title}-${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: {
		flex: 1,
		padding: 5,
	},
	item: {
		marginBottom: 10,
		...borders.dottedLeftBorder,
	},
	title: {
		fontSize: 15,
		color: "grey",
		textAlign: "center",
	},
	value: {
		fontSize: 28,
		fontWeight: "bold",
		textAlign: "center",
	},
});

export default StatList;