Untitled

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

// JSON de datos proporcionado en la Interacción 2
const puntosLimpiosData = [
  {
    "nombre_punto": "Punto Limpio 1",
    "direccion": "Av. Grecia 123",
    "materiales_normalizados": ["Vidrio", "Cartón/Papel", "Plásticos", "Metales"],
    "latitud": -33.4795,
    "longitud": -70.6120
  },
  {
    "nombre_punto": "Punto Limpio 2",
    "direccion": "Plaza Mayor",
    "materiales_normalizados": ["Vidrio", "Cartón/Papel", "Plásticos", "Metales"],
    "latitud": -33.4567,
    "longitud": -70.6654
  },
  {
    "nombre_punto": "Punto Limpio 3",
    "direccion": "Mercado Central",
    "materiales_normalizados": ["Aceite", "Metales"],
    "latitud": -33.4350,
    "longitud": -70.6473
  }
];

// Componente React Native para listar los puntos
const PuntosLimpiosLista = () => {
  const renderItem = ({ item }) => (
    <View style={styles.card}>
      <Text style={styles.title}>{item.nombre_punto}</Text>
      <Text style={styles.text}>📍 Dirección: {item.direccion}</Text>
      <Text style={styles.text}>Materiales Aceptados:</Text>
      <Text style={styles.materials}>{item.materiales_normalizados.join(' • ')}</Text>
      <Text style={styles.coordinates}>
        Coord.: {item.latitud}, {item.longitud}
      </Text>
    </View>
  );

  return (
    <FlatList
      data={puntosLimpiosData}
      renderItem={renderItem}
      keyExtractor={(item) => item.nombre_punto}
    />
  );
};

// Estilos básicos
const styles = StyleSheet.create({
  card: { padding: 15, margin: 10, borderWidth: 1, borderColor: '#ccc', borderRadius: 8 },
  title: { fontSize: 18, fontWeight: 'bold', marginBottom: 5 },
  text: { fontSize: 14 },
  materials: { fontSize: 14, fontWeight: 'bold', color: 'green', marginTop: 3, marginBottom: 5 },
  coordinates: { fontSize: 12, color: '#666' }
});

export default PuntosLimpiosLista;