import { Card, Image, Space, Button } from 'antd';
import { connect } from 'react-redux';
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 }}
    >
    <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>;

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

export default CGoodCard;
