import React, { PureComponent } from 'react';
import { Button, ButtonGroup, Icon, Toolbar, ToolbarActions } from '../components/Photon';

export default class App extends PureComponent {
	render() {
		return (
			<div className="window">
				<Toolbar type="header">
					<h1 className="title">Header</h1>
					<ToolbarActions>
						<ButtonGroup>
							<Button><Icon type="home" /></Button>
							<Button><Icon type="folder" /></Button>
							<Button className="active"><Icon type="cloud" /></Button>
							<Button><Icon type="popup" /></Button>
							<Button><Icon type="shuffle" /></Button>
						</ButtonGroup>

						<Button>
							<Icon type="home text" />
							Filters
						</Button>

						<Button btnStyle="default dropdown" className="pull-right">
							<Icon type="megaphone" />
						</Button>
					</ToolbarActions>
				</Toolbar>
				<main className="window-content">
					{this.props.children}
				</main>
				<Toolbar type="footer">
					<ToolbarActions>
						<Button>Cancel</Button>
						<Button btnStyle="primary" className="pull-right">Save</Button>
					</ToolbarActions>
				</Toolbar>
			</div>
		);
	}
}