import { useObserver } from 'mobx-react-lite';
import { cartStore } from '../stores/cartStore';

export const ProductList = () => {
  return useObserver(() => {
    const products = cartStore.products;

    return (
      <div className="product-list">
        <h2>🔥 热门商品</h2>
        <div className="grid">
          {products.map(product => (
            <div key={product.id} className="card">
              <div className="image">{product.image}</div>
              <div className="info">
                <h3>{product.name}</h3>
                <p>{product.description}</p>
                <div className="price">¥{product.price}</div>
                <button onClick={() => cartStore.addToCart(product)}>
                  加入购物车
                </button>
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  });
};