---
const { products } = Astro.props;
---
<style>
	ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
		display: flex;
	}

	figure {
		width: 200px;
		padding: 7px;
		border: 1px solid black;
		display: flex;
		flex-direction: column;
	}

	figure figcaption {
		text-align: center;
		line-height: 1.6;
	}

	figure img {
		width: 100%;
		height: 250px;
		object-fit: cover;
	}

	.product a {
		display: block;
		text-decoration: none;
		color: inherit;
	}

	.name {
		font-weight: 500;
	}

	.price {
		font-size: 90%;
		color: #787878;
	}
</style>
<slot name="title"></slot>
<ul>
{products.map(product => (
	<li class="product">
		<a href={`/products/${product.id}`}>
			<figure>
				<img src={product.image} />
				<figcaption>
					<div class="name">{product.name}</div>
					<div class="price">${product.price}</div>
				</figcaption>
			</figure>
		</a>
	</li>
))}
</ul>