import { router } from 'expo-router';
import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { ScreenHeader } from '../../src/components/ScreenHeader';
import { MaterialCommunityIcons } from '@expo/vector-icons';

export default function PurchasesHome() {
  const tiles = [
    { label: 'Solar PIN', icon: 'solar-power', route: '/(app)/solar' },
    { label: 'Airtime', icon: 'cellphone', route: '/(app)/airtime' },
    { label: 'Data', icon: 'wifi', route: '/(app)/data' },
  ];
  return (
    <SafeAreaView style={styles.safeArea} edges={['top']}>
      <ScrollView contentContainerStyle={styles.content}>
        <ScreenHeader title="Purchases" subtitle="Buy solar, airtime, and data from the real VTU backend." onBack={() => router.back()} />
        <View style={styles.grid}>
          {tiles.map((tile) => (
            <Pressable key={tile.label} style={styles.card} onPress={() => router.push(tile.route as any)}>
              <MaterialCommunityIcons name={tile.icon as any} size={24} color="#16A34A" />
              <Text style={styles.label}>{tile.label}</Text>
            </Pressable>
          ))}
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safeArea: { flex: 1, backgroundColor: '#F4FAF7' },
  content: { padding: 20 },
  grid: { gap: 12 },
  card: { backgroundColor: '#fff', borderRadius: 20, padding: 18, borderWidth: 1, borderColor: '#D8E7DF', flexDirection: 'row', alignItems: 'center', gap: 12 },
  label: { color: '#062117', fontWeight: '800', fontSize: 16 },
});