import * as React from "react";
import Grid from "@mui/material/Unstable_Grid2";
import Typography from "@mui/material/Typography";
import { ProductCard } from "./ProductCard";

function Products({ machineName, products, onSelect }) {
    const productItems = products.map((product) => {
        return (
            <Grid md={6} key={product.id} sx={{ display: "flex" }}>
                <ProductCard product={product} />
            </Grid>
        );
    });

    return (
        <>
            <Typography variant="h4" gutterBottom>
                Products - {machineName}
            </Typography>

            <Grid container spacing={2}>
                {productItems}
            </Grid>
        </>
    );
}

export { Products };
