import React, { useState } from 'react';
import { StyleSheet, View, Text, Image, Switch} from 'react-native';

const items = [
  {
    id: 1,
    name: 'Sneackers Smoosh',
    price: 429,
    imageURL: 'https://cdn.discordapp.com/attachments/749770267844280320/819587044409999400/Sneackers_3_1000x1000.png',
  },
  {
    id:2,
    name: 'Air force B8',
    price: 395,
    imageURL: 'https://cdn.discordapp.com/attachments/749770267844280320/819586862347845632/Sneackers_2_1000x1000.png',
  },
  {
    id:3,
    name: 'Spoon',
    price: 1249,
    imageURL: 'https://cdn.discordapp.com/attachments/749770267844280320/819586870429876284/Sneackers_4_000x1000.png',
  },
  {
    id:4,
    name: 'Yeezy Inesta 700',
    price: 699,
    imageURL: 'https://cdn.discordapp.com/attachments/749770267844280320/819586883461578833/Sneackers_1000x1000.png',
  }
]

const styles = StyleSheet.create({
  header: {
    width: '100%',
    height: '15%',
    backgroundColor: '#eee',
    alignItems: 'center',
    justifyContent: 'center',
  },

  container: {
    flex: 1,
    alignItems: 'center',
  },

  box: {
    width: '45%',
    height: 300,
    marginVertical: 5,
    //borderRadius: 20,
  },

  inner: {
    flex: 1,
    backgroundColor: '#eee',
    //alignItems:'center',
    //justifyContent:'center'
    borderRadius: 10,
  },

  containerbox: {
    justifyContent: 'space-evenly',
    flexDirection: 'row',
    flexWrap: 'wrap',
    marginTop: 10,
  },
});

const App = () => {
    const [isEnabled, setIsEnabled] = useState(false);
    const toggleSwitch = () => setIsEnabled(previousState => !previousState);

    return (
      <View style={styles.container}>
        <View style={styles.header}>
          <Text>Snack Sneackers</Text>
        </View>

        <View style={styles.containerbox}>
          {items.map((item) => {
            <View style={styles.box}>
              <View style={styles.inner}>
                <Image
                  style={{ height: 200, width: '100%', resizeMode: 'cover',borderTopLeftRadius: 10, borderTopRightRadius: 10}}
                  source={{ uri: items.imageURL }}
                />
                <Text style={{ textAlign: 'left', padding: 5, }} >{items.name}- {items.price}€</Text>
                  <Switch
                    style={{ marginTop: 20, marginRight: 5}}
                    trackColor={{ false: "#767577", true: "#81b0ff" }}
                    thumbColor={isEnabled ? "#fff" : "#fff"}
                    ios_backgroundColor="#3e3e3e"
                    onValueChange={toggleSwitch}
                    value={isEnabled}
                  />
                </View>
              </View>
          })}
        </View>
      </View>
    );
  }

  export default App;