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

const items = [
  {
    id: 1,
    name: 'Panadol',
    price: 18,
    image: require('../assets/images/products/panadol.png'),
  },
  {
    id: 2,
    name: 'Amoxil 125mg Syrup',
    price: 128,
    image: require('../assets/images/products/amoxil-syrup-125mg.jpg'),
  },
  {
    id: 3,
    name: 'Arinac Forte',
    price: 50,
    image: require('../assets/images/products/arinac-forte.jpg'),
  },
  {
    id: 4,
    name: 'Telfast 120mg',
    price: 75,
    image: require('../assets/images/products/telfast-120mg.jpg'),
  },
  {
    id: 5,
    name: 'Risek 40mg Tablet',
    price: 120,
    image: require('../assets/images/products/risek-40mg.jpg'),
  },
  {
    id: 6,
    name: 'Coferb Cough Syrup',
    price: 90,
    image: require('../assets/images/products/coferb-syp.jpg'),
  },
];

const Item = ({name, image, price}) => (
  <View style={styles.itemContainer}>
    <Image source={image} style={styles.image} />
    <Text style={styles.text}>{name}</Text>
    <Text style={styles.text}>Rs. {parseFloat(price.toFixed(2))}</Text>
  </View>
);

const MedicineList = () => {
  return (
    <FlatList
      data={items}
      numColumns={2}
      renderItem={({item}) => (
        <Item name={item.name} image={item.image} price={item.price} />
      )}
      keyExtractor={item => item.id.toString()}
    />
  );
};

const styles = StyleSheet.create({
  itemContainer: {
    flex: 1,
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 5,
    padding: 20,
    margin: 10,
    alignItems: 'center',
  },
  image: {
    width: 100,
    height: 100,
    resizeMode: 'contain',
  },
  text: {
    fontSize: 12,
    marginTop: 10,
  },
});

export default MedicineList;
