import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";

var _templateObject, _templateObject2;

import React from "react";
import Box from "../../Box";
import Flex from "../../CssFlex";
import Typography from "../../Typography";
import MicrosoftCircle from "../../BrandIcon/MicrosoftCircle";
import GoogleAdsCircle from "../../BrandIcon/GoogleAdsCircle";
import styled from "../../styles/styled";
var PlatformsConfig = {
  microsoft: {
    title: "Microsoft Ads",
    Icon: MicrosoftCircle,
    primaryColor: "primary.500"
  },
  google: {
    title: "Google Ads",
    Icon: GoogleAdsCircle,
    primaryColor: "primary.900"
  }
};

function getPriceTag(price, currency) {
  var _window$navigator;

  /* @ts-ignore */
  var browserLanguage = ((_window$navigator = window.navigator) === null || _window$navigator === void 0 ? void 0 : _window$navigator.locale) || "en-US";
  var priceTag = new Intl.NumberFormat(browserLanguage, {
    style: "currency",
    currency: currency
  }).format(price);
  return priceTag;
}

function PromoCard(_ref) {
  var platform = _ref.platform,
      price = _ref.price,
      _ref$currency = _ref.currency,
      currency = _ref$currency === void 0 ? "USD" : _ref$currency,
      description = _ref.description;

  var _PlatformsConfig$plat = PlatformsConfig[platform].primaryColor.split("."),
      _PlatformsConfig$plat2 = _slicedToArray(_PlatformsConfig$plat, 2),
      color = _PlatformsConfig$plat2[0],
      shade = _PlatformsConfig$plat2[1];

  var Icon = PlatformsConfig[platform].Icon;
  return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(Flex, {
    textAlign: "center",
    borderRadius: "12px 12px 0 0",
    backgroundColor: PlatformsConfig[platform].primaryColor,
    py: "sm",
    gap: "sm",
    justifyContent: "center",
    alignItems: "center"
  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Icon, {
    size: 24
  }), /*#__PURE__*/React.createElement(Typography, {
    color: "white",
    weight: "bold"
  }, PlatformsConfig[platform].title))), /*#__PURE__*/React.createElement(Box, {
    textAlign: "center",
    py: "md",
    borderRadius: "12"
  }, /*#__PURE__*/React.createElement(PriceTag, {
    color: color,
    shade: shade,
    weight: "bold"
  }, getPriceTag(price, currency)), description && /*#__PURE__*/React.createElement(Typography, {
    variant: "small",
    color: "neutral",
    shade: 400
  }, description)));
}

var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  box-shadow: ", ";\n  border-radius: 12px;\n"])), function (props) {
  return props.theme.shadows.normal;
});
var PriceTag = styled(Typography)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  font-size: 2rem;\n"])));
export default PromoCard;