import * as React from 'react';
import { breakpoints, cnCreate } from '@megafon/ui-helpers';
import { setRelAttribute } from "../../../helpers/setRelAttribute";
import useResolutions from "../../../hooks/useResolutions";
import "./BlogBoxTile.css";
var cn = cnCreate('mfui-blog-box-tile');
var BlogBoxTile = function BlogBoxTile(_ref) {
  var date = _ref.date,
    title = _ref.title,
    href = _ref.href,
    target = _ref.target,
    rel = _ref.rel,
    _ref$image = _ref.image,
    srcMobile = _ref$image.srcMobile,
    srcDesktop = _ref$image.srcDesktop,
    srcThumbnail = _ref$image.srcThumbnail,
    _ref$image$alt = _ref$image.alt,
    alt = _ref$image$alt === void 0 ? 'image' : _ref$image$alt,
    view = _ref.view,
    classes = _ref.classes;
  var _useResolutions = useResolutions(),
    isMobile = _useResolutions.isMobile;
  var isViewThumbnail = view === 'thumbnail';
  var currentRel = setRelAttribute(rel, target);
  var renderImage = function renderImage() {
    if (isViewThumbnail) {
      return isMobile ? null : /*#__PURE__*/React.createElement("picture", {
        className: cn('picture')
      }, /*#__PURE__*/React.createElement("img", {
        className: cn('image'),
        src: srcThumbnail,
        alt: alt
      }));
    }
    return /*#__PURE__*/React.createElement("picture", {
      className: cn('picture')
    }, /*#__PURE__*/React.createElement("source", {
      media: "(min-width: ".concat(breakpoints.DESKTOP_SMALL_START, "px)"),
      srcSet: srcDesktop
    }), /*#__PURE__*/React.createElement("img", {
      className: cn('image'),
      src: srcMobile,
      alt: alt
    }));
  };
  return /*#__PURE__*/React.createElement("a", {
    className: cn({
      view: view
    }),
    href: href,
    target: target,
    rel: currentRel
  }, renderImage(), /*#__PURE__*/React.createElement("div", {
    className: cn('content')
  }, /*#__PURE__*/React.createElement("div", {
    className: cn('date')
  }, date), /*#__PURE__*/React.createElement("div", {
    className: cn('title', [classes === null || classes === void 0 ? void 0 : classes.title])
  }, title)));
};
export default BlogBoxTile;