import React from 'react';
import {Component} from 'react';
import {Tooltip} from 'react-tippy';

import './Thumbnail.css'

class Thumbnail extends Component {
    constructor(props) {
        super(props);
    }

    render() {

        return (

            console.log(this.props.textures),
                console.log(this.props.activeThumbnails ),

                <div onClick={() => this.props.pickTextures(this.props.textures)}
                     className={this.props.activeThumbnails .some(thumbnail => thumbnail === this.props.textures) ? "button is-primary thumbnail" : "button thumbnail"}>
                    <Tooltip title={this.props.textureName}>
                <span>
                    <figure className={"image is-32x32"}>
                        <img src={this.props.textures.urlImage}/>
                    </figure>
                </span>
                    </Tooltip>
                </div>
        );

    }
}

export default Thumbnail;