import React, {Component} from 'react';
import {Link} from 'react-router-dom';
import { Col, Card, CardBody, CardTitle, CardSubtitle, Button} from 'reactstrap';
import {coMarketTexts} from '../../../constants/coMarketConstants';

class ShopItem extends Component {
    getShopItemPackageTitle(name) {
        return name.length > 40 ? name.substring(0, 40) + '...' : name;
    }

    render() {
        const {shopPackage, shopId} = this.props;


        return (
            <Col xl="3" lg="3" md="4" sm="6" xs="12">
                    <Card className="shop-package-item">
                        <img
                            className="card-img-top shop-image-photo"
                            src={shopPackage.image}
                            alt="Card image cap"/>
                        <CardBody>
                          <CardTitle className="shop-package-title">
                              <Link to={`/co-market/${shopId}/${shopPackage.id}`}>
                                  {this.getShopItemPackageTitle(shopPackage.name)}
                              </Link>
                          </CardTitle>
                          <CardSubtitle className="shop-package-reference">
                              {shopPackage.reference}
                          </CardSubtitle>

                          <div className="shop-package-country">
                              {coMarketTexts.labels.AVAILABLE_IN}: {shopPackage.country}
                              <span className={'flag-icon flag-icon-' + shopPackage.countryCode}></span>
                          </div>
                          <div className="shop-package-details-btn-layer">
                              <Link id={'shop-package-details-' + shopPackage.id} to={`/co-market/${shopId}/${shopPackage.id}`}>
                                  <Button className="shop-package-details-btn">{coMarketTexts.buttons.DETAILS}</Button>
                              </Link>
                          </div>

                        </CardBody>
                     </Card>
            </Col>
        );
    }
}

export default ShopItem;