<div class="product-page">
    <div class="back-button">
        <img class="back-button-svg" src="/res/back-arrow.svg" height="60em" alt="back-arrow">
    </div>

    <div class="product-display"> 

        <div class="product-image-container">
            <img class="active-image" src="{this.state.image}" alt="Image of ${this.state.name}" title="Image of {this.state.name}">
        </div>
        
        <div class="product-info">
            <div class="product-name">{this.state.name}</div>
            <div class="product-price">£{this.state.price}</div>
            <div class="product-description">{this.state.description}</div>
            <div class="product-quantity">
                <span class="quantity-label">Quantity:</span>
                <input class="quantity-input" type="number" value="1" min="1" step="1"/>
            </div>
            <div class="product-add-to-basket">
                <button class="add-to-cart-button">Add to Basket</button>
            </div>
        </div>
        
    </div>
</div>
