import React from 'react'
import { Row, Col, Card } from 'antd'
import classNames from 'classnames'
import { Icon } from 'components/Icon'
import './index.scss'
import { Paragraph } from '../Typography'

export interface ShopifyCollectionItemProps {
  id?: string
  imgUrl: string
  name: string
  isSelected?: boolean
}

const ShopifyCollectionItem = ({
  imgUrl,
  name,
  isSelected
}: ShopifyCollectionItemProps) => {
  return (
    <Card
      className={classNames(
        'shopify-collection-item m__b--8',
        isSelected && 'selected'
      )}
    >
      <Row gutter={12} align="middle" justify="start">
        <Col>
          {imgUrl ? (
            <img className="shopify-collection-item__image" src={imgUrl} />
          ) : (
            <Row
              align="middle"
              justify="center"
              className="shopify-collection-item__skeleton"
            >
              <Icon name="shopping-empty" />
            </Row>
          )}
        </Col>
        <Col>
          <Paragraph preset="semibold16">{name}</Paragraph>
        </Col>
      </Row>
    </Card>
  )
}

export default ShopifyCollectionItem
