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

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;

import React from 'react';
import { Link } from '@sentecacommerce-theme/lib';
import styled from 'styled-components';
import { Typography } from '../Typography';
import { BreadcrumbsPlaceholder } from '../BreadcrumbsPlaceholder';
import { IconLongArrow } from '../Icons';
export var Breadcrumbs = props => {
  var {
    data,
    isLoading,
    noPaddingLeft
  } = props;

  if (!(data != null && data.length) || isLoading) {
    return /*#__PURE__*/React.createElement(Container, {
      noPadding: noPaddingLeft
    }, /*#__PURE__*/React.createElement(BreadcrumbsPlaceholder, null));
  }

  return /*#__PURE__*/React.createElement(Container, {
    noPadding: noPaddingLeft
  }, data.map((bc, i) => {
    var isLast = i === data.length - 1;
    var isPrev = i === data.length - 2;
    return /*#__PURE__*/React.createElement(BreadcrumbListItem, {
      key: bc.name + "__" + i
    }, /*#__PURE__*/React.createElement(Link, {
      href: bc.link,
      passHref: true
    }, /*#__PURE__*/React.createElement("a", null, isPrev && /*#__PURE__*/React.createElement(MobileIcon, null, /*#__PURE__*/React.createElement(IconLongArrow, null)), /*#__PURE__*/React.createElement(BreadcrumbLink, {
      isLast: isLast
    }, "" + bc.name))), !isLast && /*#__PURE__*/React.createElement(Divider, null));
  }));
};
var Divider = styled.span.attrs({
  className: 'd-none d-md-block mx-2'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  &:after {\n    content: '/';\n  }\n"])));
var MobileIcon = styled.span.attrs({
  className: 'd-flex align-items-center d-md-none mr-2'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  & > svg {\n    width: 2rem;\n    transform: rotate(180deg);\n  }\n"])));
var Container = styled.ul.attrs(props => {
  return {
    className: "d-flex mt-3  container-fluid " + (props.noPadding && 'pl-md-0')
  };
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  flex-wrap: wrap;\n  line-height: 1;\n  position: relative;\n  z-index: 10;\n"])));
var BreadcrumbListItem = styled.li.attrs({
  className: 'd-flex align-items-center'
})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose([""])));
var BreadcrumbLink = styled(Typography).attrs((_ref) => {
  var {
    isLast
  } = _ref;
  return {
    as: 'a',
    variant: '7',
    className: (isLast ? 'd-flex' : 'd-none d-md-flex') + " align-items-center"
  };
})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  @media (max-width: ", ") {\n    font-size: 1.6rem;\n  }\n"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.breakpoints.md.max;
});
//# sourceMappingURL=index.js.map