import { MaterialCommunityIcons } from "@expo/vector-icons";
import { StyleSheet, Text, View } from "react-native";

import type { MobileUser } from "@/lib/api";
import { formatMoney } from "@/lib/format-money";

type AccountSummaryProps = {
    user: MobileUser;
};

export function AccountSummary({ user }: AccountSummaryProps) {
    return (
        <View style={styles.summaryGrid}>
            <SummaryItem
                icon="wallet-outline"
                label="ბალანსი"
                value={formatMoney(user.balance)}
            />
            <SummaryItem
                icon="phone-outline"
                label="ტელეფონი"
                value={formatMoney(user.phone_balance)}
            />
            <SummaryItem
                icon="tag-outline"
                label="ჩიპები"
                value={formatMoney(user.tag_debt)}
            />
        </View>
    );
}

function SummaryItem({
    icon,
    label,
    value,
}: {
    icon: keyof typeof MaterialCommunityIcons.glyphMap;
    label: string;
    value: string;
}) {
    return (
        <View style={styles.summaryItem}>
            <MaterialCommunityIcons name={icon} size={22} color="#1b6ca8" />
            <Text style={styles.summaryLabel}>{label}</Text>
            <Text style={styles.summaryValue}>{value}</Text>
        </View>
    );
}

const styles = StyleSheet.create({
    summaryGrid: {
        gap: 10,
    },
    summaryItem: {
        alignItems: "center",
        borderColor: "#e0e5dc",
        borderRadius: 8,
        borderWidth: 1,
        flexDirection: "row",
        gap: 10,
        minHeight: 52,
        paddingHorizontal: 12,
    },
    summaryLabel: {
        color: "#5f6b7a",
        flex: 1,
        fontSize: 14,
        lineHeight: 20,
    },
    summaryValue: {
        color: "#18202a",
        fontSize: 15,
        fontWeight: "700",
        lineHeight: 21,
    },
});