import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/taggedTemplateLiteralLoose";

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;

import React from 'react';
import styled from 'styled-components';
import { Link, useProductState } from '@sentecacommerce-theme/lib';
import { Typography } from '../../../Common/Typography';
import { Price } from '../Price';
export var ProductInfo = (_ref) => {
  var {
    mobile = false
  } = _ref;
  var {
    metaData
  } = useProductState();
  var hasBrand = Boolean(metaData.brand.slug && metaData.brand.name);
  return /*#__PURE__*/React.createElement(Container, {
    mobile: mobile
  }, /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Left, null, /*#__PURE__*/React.createElement(InfoContainer, null, /*#__PURE__*/React.createElement(ProductName, null, metaData.name))), hasBrand && /*#__PURE__*/React.createElement(Right, null, /*#__PURE__*/React.createElement(Link, {
    href: "/" + metaData.brand.slug + "/b"
  }, /*#__PURE__*/React.createElement("a", {
    "aria-label": metaData.brand.name
  }, /*#__PURE__*/React.createElement(BrandLogo, {
    src: metaData.brand.logo
  }))))), /*#__PURE__*/React.createElement(PriceContainer, null, /*#__PURE__*/React.createElement(Price, null)));
};
var Container = styled.div.attrs(props => ({
  className: props.mobile ? 'd-flex d-lg-none' : 'd-none d-lg-flex'
}))(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  justify-content: space-between;\n  align-items: flex-start;\n  flex-direction: column;\n"])));
var BrandLogo = styled.img(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  max-width: 10rem;\n  @media (min-width: ", ") {\n    max-width: 7.5rem;\n  }\n"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.breakpoints.md.min;
});
var ProductName = styled(Typography).attrs({
  as: 'h2',
  variant: '4',
  className: 'mb-1'
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose([""])));
var Flex = styled.div.attrs({
  className: 'd-flex'
})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
var Right = styled.div.attrs({
  className: 'ml-auto'
})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose([""])));
var Left = styled.div.attrs({
  className: 'pr-3'
})(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose([""])));
var InfoContainer = styled.div.attrs({
  className: ''
})(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose([""])));
var PriceContainer = styled.div.attrs({
  className: 'pt-2'
})(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose([""])));
//# sourceMappingURL=index.js.map