import React, {Component} from 'react';
import {Row} from 'reactstrap';
import PackageOptionItemContainer from './PackageOptionItemContainer.jsx';
import {coMarketTexts} from '../../../constants/coMarketConstants';

class PackageOptions extends Component {
    render() {
        const {groups, country} = this.props;
        return (
                <div className="shop-package-options">
                    <h6 className="shop-package-label options-header">{coMarketTexts.labels.PACKAGE_OPTIONS}</h6>
                        {
                            Object.keys(groups).map(groupKey => {
                                const group = groups[groupKey];
                                return <div key={'group-' + group.idGroup} className="package-option">
                                    <h6 className="shop-package-label"> {group.groupName}:</h6>
                                    <Row>
                                        {
                                            group.options.map(option => {
                                                return <PackageOptionItemContainer key={'option-' + group.idGroup + option.idOptionPackage}
                                                    option={option}
                                                    country={country}
                                                    idGroup={group.idGroup}/>
                                            })
                                        }
                                    </Row>
                                </div>
                            })
                        }
                </div>
        );
    }
}

export default PackageOptions;