import { Card, Image, Space } from 'antd';
import { connect } from 'react-redux';
import { Button, Radio } from 'antd';
import { actionCartAdd } from '../action';
import { Link } from 'react-router-dom';


const { Meta } = Card;
const backendURL = "http://shop-roles.asmer.fs.a-level.com.ua" ;

const GoodCard = ({good:{_id, name, price, images}, onAdd}) =>
  <Card 
    
    hoverable
    style={{ width: 240 }}
    // cover={images && images[0] && images[0].url &&<Link to={`/good/${_id}`}> <img src={backendURL + '/' + images[0].url} /></Link>}
    >
    <Meta title={name} />
    <Space direction="vertical">
      {images && images[0] && images[0].url &&<Link to={`/good/${_id}`}> <Image width={200} height={200} style={{objectFit: 'cover'}} src={backendURL + '/' + images[0].url} /></Link>}
      <strong>{price} грн.</strong>
      <Button size="middle" onClick={() => onAdd({_id, name, price, images})}>Купить</Button>
    </Space>
   
     
    
    

  </Card>




{/* <li className='GoodCard'>
    <Link to={`/good/${_id}`}> 
        <h2>{name}</h2>
        {images && images[0] && images[0].url && <img src={backendURL + '/' + images[0].url} />}
    </Link>    
    <strong>{price}</strong>
    <button onClick={() => onAdd({_id, name, price, images})}>+</button>
    
</li> */}

const CGoodCard = connect(null, {onAdd: actionCartAdd})(GoodCard)

export default CGoodCard;