import React from 'react';
import ReactDOM from 'react-dom';

document.addEventListener('DOMContentLoaded', function(){


    class ShopItem extends React.Component {
        render() {
            return (
                <div>
                    <ShopItemHeader
                        title={this.props.title}
                        img={this.props.img}
                    />
                    <ShopItemDescription
                        description={this.props.desc}
                    />
                    <ShopItemPricing price={this.props.price} />
                </div>
            )
        }
    }

    class ShopItemHeader extends React.Component {
        render() {
            return (
                <div>
                    <h1>{this.props.title}</h1>
                    <img src={this.props.img} />
                </div>
            )
        }
    }

    class ShopItemDescription extends React.Component {
        render() {
            return (
                <article>
                    <p>{this.props.description}</p>
                </article>
            )
        }
    }

    class ShopItemPricing extends React.Component {
        render() {
            return (
                <div>
                    Cena: {this.props.price}
                    <button>Kup!</button>
                </div>
            )
        }
    }

    class App extends React.Component {
        render() {
            return <div>
                <ShopItem
                    title="super produkt!"
                    desc="jedyny taki na swiecie"
                    price="9999999.99"
                    img="http://dsadas/dsadsa/dsa.pl"
                />
                <ShopItem
                    title="super produkt!2"
                    desc="jedyny taki na swiecsfdsie"
                    price="119.99"
                    img="http://dsadas/dsadsa/dsa.pl"
                />
            </div>;
        }
    }

    ReactDOM.render(
        <App/>,
        document.getElementById('app')
    );
});