import React, { Component } from 'react';
import './index.scss';

class Images extends Component {
    render() {
        return (
            <div>
                <div className="row">
                    <div className="col-sm-6">
                        <label>-{this.props.index + 1}{'.1'}- Title</label>
                    </div>
                    <div className="col-sm-6">
                        <input type="text" name="title" value={this.props.item.title} onChange={this.props.onChange.bind(this, this.props.index)} />
                    </div>
                </div>
                <div className="row">
                    <div className="col-sm-6">
                        <label>-{this.props.index + 1}{'.2'}- URL</label>
                    </div>
                    <div className="col-sm-6">
                        <input type="text" name="url" value={this.props.item.url} onChange={this.props.onChange.bind(this, this.props.index)} />
                    </div>
                </div>
                <div className="row">
                    <div>
                        <button type="button" onClick={() => this.props.onClickRemove(this.props.index)} className="btn btn-secondary btn-sm btn-danger">Remove Image</button>
                    </div>
                </div>
                <div>
                    &nbsp;
                </div>
            </div>
        );
    }
}

export default Images;