'use strict';

import React, { Component, PropTypes } from 'react';

class Package extends Component {
    static propTypes = {
        children: PropTypes.node,
        billItems: PropTypes.object
    }
    render() {
        const { billItems } = this.props;
        const { subscriptions } = this.props.billItems.package;

        const packages = subscriptions.map((val, key) =>
            <tr key={key}>
                <td>{val.name}</td>
                <td>{val.type}</td>
                <td>{val.cost}</td>
        );

        return (
            <section>
                <h1>Latest Bill</h1>
                <h3>Package</h3>
                <table>
                    <thead>
                    <tr>
                        <th>Subscription</th>
                        <th>Type</th>
                        <th>Price</th>
                    </tr>
                    </thead>
                    <tbody>
                    {packages}
                    </tbody>
                </table>
                <p><strong>Sub Total</strong> {billItems.package.total}</p>
                {this.props.children}
            </section>
        );
    }
}

export default Package;
            </tr>