Attractions.js

import { useState, useEffect } from 'react';
import { Text, View, FlatList, TouchableOpacity, TextInput } from 'react-native';

// Example data for attractions
const attractionsData = [
  { id: 1, name: 'Skate Park A', rating: 4.5, distance: 1.2 },
  { id: 2, name: 'Skate Shop B', rating: 4.2, distance: 0.8 },
  { id: 3, name: 'Skate Spot A', rating: 2.6, distance: 3.9 },
  { id: 4, name: 'Skate Shop C', rating: 1.5, distance: 0.2 },
  { id: 5, name: 'Skate Park B', rating: 4.9, distance: 4.3 },
  { id: 6, name: 'Skate Spot B', rating: 3.8, distance: 1.7 },
  { id: 7, name: 'Skate Shop A', rating: 4.0, distance: 4.6 },
];

export default function AttractionsScreen() {
  const [attractions, setAttractions] = useState([]);
  const [searchQuery, setSearchQuery] = useState('');

  useEffect(() => {
    // Load attractions data from mock data
    setAttractions(attractionsData);
  }, []);

  // Function to render each attraction item
  const renderAttractionItem = ({ item }) => (
    <TouchableOpacity style={{ padding: 10, borderBottomWidth: 1, borderBottomColor: '#ccc' }}>
      <Text style={{ fontSize: 18, fontWeight: 'bold' }}>{item.name}</Text>
      <Text>Rating: {item.rating}</Text>
      <Text>Distance: {item.distance} miles</Text>
    </TouchableOpacity>
  );

  // Function to filter attractions based on search query
  const filteredAttractions = attractions.filter(attraction =>
    attraction.name.toLowerCase().includes(searchQuery.toLowerCase())
  );

  return (
    <View style={{ flex: 1 }}>
      <View style={{ padding: 20 }}>
        <Text style={{ fontSize: 24, fontWeight: 'bold', marginBottom: 10 }}>Nearby Locations (Mockup)</Text>
        
        {/* Search bar */}
        <TextInput
          style={{ height: 40, borderColor: 'gray', borderWidth: 1, marginBottom: 10, padding: 5 }}
          placeholder="Search locations..."
          value={searchQuery}
          onChangeText={setSearchQuery}
        />
        
        {/* FlatList to display list of attractions */}
        <FlatList
          data={filteredAttractions}
          renderItem={renderAttractionItem}
          keyExtractor={item => item.id.toString()}
          showsVerticalScrollIndicator={false}
        />
      </View>
    </View>
  );
}