import React from 'react';
import './LookCell.scss';
import { Image } from './Image';
import { Look } from '../types/LookTypes';

interface Props {
  attributes: Look;
  lazyLoad?: boolean;
  onShopLook?: () => void;
}

export const LookCell: React.FC<Props> = ({
  attributes,
  lazyLoad = true,
  onShopLook,
}) =>
  attributes.variants && (
    <div className="LookCell grid-cell look-cell" onClick={() => onShopLook()}>
      <div className="LookCell__image">
        <Image
          desktop={attributes.primary_image_urls.main}
          mobile={attributes.primary_image_urls.main}
          lazyLoad={lazyLoad}
        />
        <div className="LookCell__overlay">
          <div className="LookCell__overlay-text">Shop The Look</div>
        </div>
      </div>
    </div>
  );