import { useProducts } from "medusa-react"

export default function Home() {
  const { products, isLoading } = useProducts()

  return (
    <div style={{ padding: "2rem", fontFamily: "sans-serif" }}>
      <h1>Bienvenue sur la boutique Lucien-sens-bon</h1>
      {isLoading && <span>Chargement des produits...</span>}
      
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))", gap: "1rem" }}>
        {products && products.map((product) => (
          <div key={product.id} style={{ border: "1px solid #ccc", padding: "1rem", borderRadius: "8px" }}>
            <h3>{product.title}</h3>
            <p>{product.description}</p>
          </div>
        ))}
      </div>
      
      {!isLoading && !products?.length && (
        <p>Aucun produit trouvé. Connectez-vous à l'admin pour en ajouter !</p>
      )}
    </div>
  )
}