import React from 'react';
import './card-nav.less';

const CLOSE_IMG = require('./img/card-close.png'),
    BACK_IMG = require('./img/card-arrow.png');

/**\

    title: CardNav
    category: atom
    description:
        Just toggles between the back and close images. It's broken out
        so that it can maintain it's own state when animations hit.
    props:
        onClick[Function]: a callback for when the button is clicked
        canBack[Boolean]:
            Whether the back or close buttons should be shown

\**/
class CardNav extends React.Component {
    click() {
        if (typeof this.props.onClick === 'function') {
            this.props.onClick();
        }
    }

    render() {
        return (
            <div className="card-nav"
                onClick={ this.click.bind(this) }>
                <img src={ this.props.canBack ? BACK_IMG : CLOSE_IMG } />
            </div>
        );
    }
}

export default CardNav;
