import { List, ListItem } from '@cap-rel/smartcommon';
import { useNavigation } from '@cap-rel/smartcommon';

function ProductsList({ products }) {
    const navigate = useNavigation();

    return (
        <List>
            {products.map(product => (
                <ListItem
                    key={product.id}
                    title={product.label}
                    subtitle={`${product.price} €`}
                    image={product.thumbnail}
                    onClick={() => navigate(`/products/${product.id}`)}
                    chevron
                />
            ))}
        </List>
    );
}