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

var _templateObject, _templateObject2;

import React from 'react';
import Link from 'next/link';
import styled from 'styled-components';
import { useCookies } from '@sentecacommerce-theme/lib';
import { Typography } from '../../../Common';
export var SubFooterList = (_ref) => {
  var {
    data
  } = _ref;
  var {
    deleteCookies
  } = useCookies();

  var handleClick = () => {
    deleteCookies();
  };

  return /*#__PURE__*/React.createElement(Container, null, data.map(element => {
    var key = (element == null ? void 0 : element.url) + "-" + (element == null ? void 0 : element.label);

    if (element != null && element.url) {
      return /*#__PURE__*/React.createElement(Link, {
        prefetch: false,
        key: key,
        href: element.url
      }, /*#__PURE__*/React.createElement(Item, null, element.label));
    }

    if ((element == null ? void 0 : element.label) === 'Cookie Settings') {
      return /*#__PURE__*/React.createElement(Item, {
        key: key,
        onClick: handleClick
      }, element.label);
    }

    return /*#__PURE__*/React.createElement(Item, {
      key: key
    }, element.label);
  }));
};
var Container = styled.ul(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  list-style: none;\n\n  @media (min-width: ", ") {\n    display: flex;\n    margin: 0 -15px;\n    flex-wrap: wrap;\n    justify-content: flex-end;\n  }\n"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.breakpoints.md.min;
});
var Item = styled(Typography).attrs({
  as: 'li',
  variant: 7,
  className: 'mb-3 mb-md-0'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  cursor: pointer;\n  transition: color 0.15s ease;\n  width: max-content;\n\n  &:hover {\n    color: ", ";\n  }\n\n  @media (min-width: ", ") {\n    padding: 0 15px;\n  }\n"])), (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.palette.grey;
}, (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.palette.secondary;
}, (_ref5) => {
  var {
    theme
  } = _ref5;
  return theme.breakpoints.md.min;
});
//# sourceMappingURL=index.js.map