import React from 'react';
import styled from 'styled-components';
import { styles } from '../../utils';
import Img from 'gatsby-image';

export default function Product({ product }) {
	const { name, price, ingredients } = product;
	const { fixed } = product.img;

	return (
		<ProductWrapper>
			<Img fixed={fixed} className='img' />
			<div className='text'>
				<div className='product-content'>
					<h3 className='name'>{name}</h3>
					<h3 className='price'>{price}</h3>
				</div>
				<p className='info'>{ingredients}</p>
			</div>
		</ProductWrapper>
	);
}

const ProductWrapper = styled.div`
	@media (min-width: 576px) {
		display: grid;
		grid-template-columns: auto 1fr;
		grid-column-gap: 1rem;
	}
	.img {
		border-radius: 0.5rem;
	}
	.product-content {
		display: flex;
		justify-content: space-between;
		font-size: 1.5rem;
		text-transform: uppercase;
	}
	.name,
	.price {
		color: ${styles.colors.mainYellow};
		margin-top: 0.5rem;
	}
	.info {
		margin-top: 0.5rem;
		word-spacing: 0.2rem;
		text-transform: lowercase;
	}
`;
