App.js

import React from 'react';
import { View, StyleSheet } from 'react-native';
import CarModelGallery from './components/CarModelGallery';
import CarDetails from './components/CarDetails';
import carData from './data/carData';

const App = () => {
  const [selectedCar, setSelectedCar] = React.useState(null);
  const [favoriteCars, setFavoriteCars] = React.useState([]);

  const handleCarSelect = (car) => {
    setSelectedCar(car);
  };

  const handleToggleFavorite = (car) => {
    const isCarFavorite = favoriteCars.some((favCar) => favCar.id === car.id);
    if (isCarFavorite) {
      setFavoriteCars(favoriteCars.filter((favCar) => favCar.id !== car.id));
    } else {
      setFavoriteCars([...favoriteCars, car]);
    }
  };

  return (
    <View style={styles.container}>
      <CarModelGallery
        carData={carData}
        onCarSelect={handleCarSelect}
        favoriteCars={favoriteCars}
        onToggleFavorite={handleToggleFavorite}
      />
      {selectedCar && <CarDetails selectedCar={selectedCar} />}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#fff',
  },
});

export default App;