import React, { useState } from 'react';
import { Route, BrowserRouter as Router, Switch } from 'react-router-dom';
import NavBar from './components/NavBar';
import ProductCard from './components/ProductCard';
import Cart from './components/Cart';
import './App.css';

const App = () => {
  const [cart, setCart] = useState([]);
  const products = [
    { id: 1, name: 'Signature Tee', price: 25, image: 'https://via.placeholder.com/400x400' },
    { id: 2, name: 'Dream Hoodie', price: 45, image: 'https://via.placeholder.com/400x400' },
    { id: 3, name: 'Coronado Cap', price: 20, image: 'https://via.placeholder.com/400x400' }
  ];

  const addToCart = (product) => {
    setCart([...cart, product]);
  };

  return (
    <Router>
      <div className="App">
        <NavBar cart={cart} />
        <Switch>
          <Route exact path="/">
            <div className="product-grid">
              {products.map(product => (
                <ProductCard key={product.id} product={product} addToCart={addToCart} />
              ))}
            </div>
          </Route>
          <Route path="/cart">
            <Cart cart={cart} />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

export default App;