fitaiProto/apps/mobile/src/components/ActivityWidget.tsx

import React from 'react';
import { View, Text, StyleSheet, Dimensions } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import { Ionicons } from '@expo/vector-icons';
import { theme } from '../styles/theme';

const { width } = Dimensions.get('window');

interface ActivityWidgetProps {
    steps: number;
    calories: number;
    duration: number; // in minutes
}

export function ActivityWidget({ steps, calories, duration }: ActivityWidgetProps) {
    return (
        <View style={styles.container}>
            <LinearGradient
                colors={theme.gradients.dark}
                start={{ x: 0, y: 0 }}
                end={{ x: 1, y: 1 }}
                style={[styles.card, theme.shadows.medium]}
            >
                <View style={styles.header}>
                    <Text style={styles.title}>Daily Activity</Text>
                    <Ionicons name="stats-chart" size={20} color={theme.colors.primary} />
                </View>

                <View style={styles.statsRow}>
                    <View style={styles.statItem}>
                        <View style={[styles.iconContainer, { backgroundColor: 'rgba(59, 130, 246, 0.2)' }]}>
                            <Ionicons name="footsteps" size={20} color="#3b82f6" />
                        </View>
                        <Text style={styles.statValue}>{steps.toLocaleString()}</Text>
                        <Text style={styles.statLabel}>Steps</Text>
                    </View>

                    <View style={styles.divider} />

                    <View style={styles.statItem}>
                        <View style={[styles.iconContainer, { backgroundColor: 'rgba(239, 68, 68, 0.2)' }]}>
                            <Ionicons name="flame" size={20} color="#ef4444" />
                        </View>
                        <Text style={styles.statValue}>{calories}</Text>
                        <Text style={styles.statLabel}>Kcal</Text>
                    </View>

                    <View style={styles.divider} />

                    <View style={styles.statItem}>
                        <View style={[styles.iconContainer, { backgroundColor: 'rgba(16, 185, 129, 0.2)' }]}>
                            <Ionicons name="time" size={20} color="#10b981" />
                        </View>
                        <Text style={styles.statValue}>{duration}m</Text>
                        <Text style={styles.statLabel}>Active</Text>
                    </View>
                </View>

                {/* Simple Bar Chart Visualization */}
                <View style={styles.chartContainer}>
                    {[0.4, 0.6, 0.3, 0.8, 0.5, 0.9, 0.7].map((height, index) => (
                        <View key={index} style={styles.barContainer}>
                            <LinearGradient
                                colors={theme.gradients.primaryVertical}
                                style={[styles.bar, { height: height * 60 }]}
                            />
                            <Text style={styles.dayLabel}>
                                {['M', 'T', 'W', 'T', 'F', 'S', 'S'][index]}
                            </Text>
                        </View>
                    ))}
                </View>
            </LinearGradient>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        marginHorizontal: 20,
        marginBottom: 20,
    },
    card: {
        borderRadius: 24,
        padding: 20,
        borderWidth: 1,
        borderColor: 'rgba(255, 255, 255, 0.1)',
    },
    header: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        marginBottom: 20,
    },
    title: {
        fontSize: 18,
        fontWeight: '700',
        color: '#fff',
    },
    statsRow: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        marginBottom: 24,
    },
    statItem: {
        alignItems: 'center',
        flex: 1,
    },
    iconContainer: {
        width: 40,
        height: 40,
        borderRadius: 20,
        justifyContent: 'center',
        alignItems: 'center',
        marginBottom: 8,
    },
    statValue: {
        fontSize: 20,
        fontWeight: '700',
        color: '#fff',
        marginBottom: 2,
    },
    statLabel: {
        fontSize: 12,
        color: theme.colors.gray400,
        fontWeight: '500',
    },
    divider: {
        width: 1,
        height: 40,
        backgroundColor: 'rgba(255, 255, 255, 0.1)',
    },
    chartContainer: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'flex-end',
        height: 80,
        paddingTop: 10,
        borderTopWidth: 1,
        borderTopColor: 'rgba(255, 255, 255, 0.1)',
    },
    barContainer: {
        alignItems: 'center',
        gap: 8,
    },
    bar: {
        width: 6,
        borderRadius: 3,
        opacity: 0.8,
    },
    dayLabel: {
        fontSize: 10,
        color: theme.colors.gray500,
        fontWeight: '600',
    },
});