import React from 'react'
import { Icon } from 'antd'
import closeIcon from './close.png'
export default class CanDeleteItem extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            showDelete: false
        }
    }

    handleMouseOver() {
        this.setState({showDelete: true})
    }

    handelMouseout() {
        setTimeout(() => {
            this.setState({showDelete: false})
        }, 400)
    }
    
    render() {
        const { title } = this.props;
        return (
            <div style={{display: "inline-block", paddingLeft: "10px", paddingRight: '10px'}} onMouseEnter={() => this.handleMouseOver()} onMouseLeave={() => this.handelMouseout()}>
                <span className="selectedItem" onBlur>{title}</span>
                {
                    this.state.showDelete && <Icon type="cross" style={{cursor: "pointer", marginLeft: "5px", fontWeight: '600'}} onClick={() => this.props.onDelete(this.props.item)}/>
                }
            </div>
        )
    }
}