import { View, Text, StyleSheet, ScrollView, Image,Button } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { TouchableOpacity } from 'react-native-gesture-handler';
import { useRouter } from 'expo-router';

const UserHomeScreen = () => {
  const router = useRouter();

  return (
    <View style={styles.container}>
        <View style={styles.header}>
          <View>
            <Text style={styles.welcome}>Bienvenue,</Text>
            <Text style={styles.shopName}>Nom de Café</Text>
          </View>
        </View>

        <Text style={styles.sectionTitle}>Nos Produits</Text>

        <View style={styles.categories}>
          <TouchableOpacity
            style={styles.categoryCard}
            onPress={() => router.push('/screens/user/GrainsScreen')}>

            <Image
              source={require('../../../assets/images/coffee_cup.jpg')} style={styles.categoryImage}
            />
            <Text style={styles.categoryTitle}>Grains de café</Text>
          </TouchableOpacity>

          <TouchableOpacity style={styles.categoryCard}>
            <Image
                source={require('../../../assets/images/coffee_cup.jpg')} style={styles.categoryImage}
            />
            <Text style={styles.categoryTitle}>Matériels</Text>
          </TouchableOpacity>
        </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F8F9FA',
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 20,
  },
  welcome: {
    fontSize: 16,
    color: '#666',
  },
  shopName: {
    fontSize: 24,
    fontWeight: '600',
    color: '#333',
  },
  avatar: {
    width: 40,
    height: 40,
    borderRadius: 20,
  },
  sectionTitle: {
    fontSize: 20,
    fontWeight: '600',
    color: '#333',
    marginHorizontal: 20,
    marginBottom: 16,
  },
  categories: {
    padding: 20,
  },
  categoryCard: {
    backgroundColor: '#fff',
    borderRadius: 16,
    marginBottom: 16,
    overflow: 'hidden',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  categoryImage: {
    width: '100%',
    height: 160,
  },
  categoryTitle: {
    fontSize: 16,
    fontWeight: '600',
    color: '#333',
    padding: 16,
  },
});

export default UserHomeScreen;


/*
    
      <Button
              title="Back to Opening Screen"
              onPress={() => router.back()}
      />
*/