import { View, Text, StyleSheet, Image, } from 'react-native';
import { TouchableOpacity } from 'react-native-gesture-handler';
import { useRouter } from 'expo-router';
import { BellRing } from 'lucide-react-native';
import COLORS from '@/app/constants/colors';


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 style={styles.notification}>
            <TouchableOpacity>
            <BellRing size={24} color="#000" />
            </TouchableOpacity>
          </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/grains.jpg')} style={styles.categoryImage}
            />
            <Text style={styles.categoryTitle}>Grains de café</Text>
          </TouchableOpacity>

          <TouchableOpacity style={styles.categoryCard}>
            <Image
                source={require('../../../assets/images/material.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: 15,
    marginTop:26,
    borderBottomWidth:0.2,
    borderColor:'#999',
  },
  welcome: {
    fontSize: 16,
    color: '#666',
  },
  shopName: {
    fontSize: 20,
    fontWeight: '700',
    color: '#333',
  },
  notification:{
    backgroundColor:COLORS.secondary,
    padding:8,
    borderRadius:8,
    borderColor:'#000',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 5,
    },
    shadowOpacity: 0.2,
    shadowRadius: 10,
    elevation: 2,
  },
  
  sectionTitle: {
    fontSize: 26,
    fontWeight: '900',
    color: '#666',
   alignSelf:'center',
   marginTop:10,

  },
  categories: {
    flex: 1,
    padding: 15,
    justifyContent: 'space-evenly',
  },
  categoryCard: {
    backgroundColor: COLORS.secondary,
    borderRadius: 16,
    marginBottom: 16,
    overflow: 'hidden',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  categoryImage: {
    width: '80%',
    alignSelf: 'center',
    height: 160,
    marginTop: 15,
    borderRadius:16,
  },
  categoryTitle: {
    fontSize: 20,
    alignSelf:'center',
    fontWeight: '800',
    color: '#000',
    padding: 16,
  },
});

export default UserHomeScreen;


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