import { useState } from "react";
import products from "./products";
import "./App.css";

export default function App() {
  const [cart, setCart] = useState([]);

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

  const total = cart.reduce((sum, item) => sum + item.price, 0);

  return (
    <div className="app">
      <header className="hero">
        <h1>Matjar Sghir</h1>
        <p>Shri hadchi li bghiti b click wahed!</p>
      </header>

      <main className="store">
        <section className="products">
          {products.map((product) => (
            <article key={product.id} className="product-card">
              <img src={product.image} alt={product.name} />
              <h2>{product.name}</h2>
              <p>{product.description}</p>
              <strong>{product.price.toFixed(2)} DH</strong>
              <button onClick={() => addToCart(product)}>Zid l-cart</button>
            </article>
          ))}
        </section>

        <aside className="cart">
          <h2>Cart</h2>
          {cart.length === 0 ? (
            <p>Ma kayn hata 7aja f cart.</p>
          ) : (
            <ul>
              {cart.map((item, index) => (
                <li key={`${item.id}-${index}`}>
                  {item.name} - {item.price.toFixed(2)} DH
                </li>
              ))}
            </ul>
          )}
          <div className="total">Total: {total.toFixed(2)} DH</div>
        </aside>
      </main>
    </div>
  );
}