import React, { useState, useEffect } from 'react';
import classNames from 'classnames/bind';
import TextItem from 'components/items/TextItem';
import ModuleDropActions from 'components/pageItems/ModuleDropActions';
import styleIdentifiers from './shopCard.scss';

// Assets
import placeholder from './assets/placeholder.jpg';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {}

export type ShopCardProps = StateProps & DispatchProps & OwnProps;

const ShopCard = (props: ShopCardProps) => {
  const { data, actions } = props;

  return (
    <div className={styles('ShopCard')}>
      <div className={styles('container')}>
        <div
          className={styles('image')}
          style={{
            backgroundImage: `url(${(data.cover && data.cover.large) ||
              (data.thumbnail && data.thumbnail.large) ||
              placeholder})`,
          }}
        />
        <div className={styles('info-container')}>
          <div className={styles('title-container')}>
            <div className={styles('title')}>
              <TextItem path={data.title} />
            </div>
            {data.price && (
              <div className={styles('price')}>
                {data.price.toLocaleString(navigator.language, {
                  style: 'currency',
                  currency: data.currency || 'EUR',
                })}
              </div>
            )}
          </div>
          <div className={styles('teaser')}>
            <TextItem path={data.teaser} />
          </div>
          <ModuleDropActions
            className={styles('actions')}
            label="Actions"
            data={data}
            actions={actions}
          />
        </div>
      </div>
    </div>
  );
};

export default ShopCard;
