import React from 'react';
import {
  SafeAreaView,
  View,
  Text,
  ScrollView,
  StyleSheet,
  StatusBar,
} from 'react-native';
import { COLORS } from '../../constants/color';
import {  ModuleTile } from '../../components/Module/module';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { MODULES_DATA } from '../../constants/data';
import styles from '../../styles/Module/module';




export default function ModulesScreen() {
 

  return (
    <SafeAreaProvider style={{ flex: 1, backgroundColor: COLORS.background }}>
   
      <StatusBar barStyle="light-content" backgroundColor={COLORS.background} />

      <ScrollView contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false}>
        {/* Header Title & Subtitle */}
        <View style={styles.header}>
          <Text style={styles.title}>All modules</Text>
          <Text style={styles.subtitle}>Facility Management & IoT platform</Text>
        </View>

        {/* 3-Column Grid Container */}
        <View style={styles.gridContainer}>
          {MODULES_DATA.map((item) => (
            <ModuleTile
              key={item.id}
              module={item}
             
            />
          ))}
        </View>
      </ScrollView>
   </SafeAreaProvider>
  );
}