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

var _templateObject, _templateObject2;

import React from "react";
import Box from "../../../ui/Box";
import CssFlex from "../../../ui/CssFlex";
import Typography from "../../../ui/Typography";
import styled from "../../../ui/styles/styled";
import GreenCheck from "../assets/GreenCheck";
import PremiumButton from "./PremiumButton";
import PremiumPrice from "./PremiumPrice";

function PremiumCard(props) {
  var className = props.className,
      title = props.title,
      description = props.description,
      active = props.active,
      checks = props.checks,
      price = props.price,
      _props$variant = props.variant,
      variant = _props$variant === void 0 ? "blue" : _props$variant,
      imgSrc = props.imgSrc;
  var buttonLabel = props.buttonLabel,
      onClick = props.onClick;
  return (
    /*#__PURE__*/
    // @ts-ignore
    React.createElement(Card, {
      hasImage: !!imgSrc,
      "data-selected": active,
      "data-variant": variant,
      className: className
    }, imgSrc && /*#__PURE__*/React.createElement(CardImage, {
      src: imgSrc,
      alt: ""
    }), /*#__PURE__*/React.createElement(PremiumPrice, price), /*#__PURE__*/React.createElement(Typography, {
      variant: "title",
      shade: 900
    }, title), /*#__PURE__*/React.createElement(Box, {
      mt: "lg"
    }, description && /*#__PURE__*/React.createElement(Typography, {
      variant: "paragraph"
    }, description), /*#__PURE__*/React.createElement(StyledList, null, checks.map(function (check, idx) {
      return /*#__PURE__*/React.createElement(Typography, {
        key: idx,
        component: "li"
      }, /*#__PURE__*/React.createElement(CssFlex, {
        alignItems: "center",
        gap: "md"
      }, /*#__PURE__*/React.createElement(GreenCheck, {
        style: {
          width: "24px",
          height: "auto",
          flexShrink: 0
        }
      }), /*#__PURE__*/React.createElement("span", {
        dangerouslySetInnerHTML: {
          __html: check
        }
      })));
    })), /*#__PURE__*/React.createElement(PremiumButton, {
      disabled: active,
      variant: variant,
      onClick: onClick
    }, buttonLabel)))
  );
}

var StyledList = styled.ul(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  list-style: none;\n  padding: 0;\n  vertical-align: center;\n\n  & > li {\n    display: flex;\n    align-items: center;\n    gap: ", ";\n  }\n\n  & > li:not(:last-child) {\n    margin-bottom: ", ";\n  }\n"])), function (_ref) {
  var theme = _ref.theme;
  return theme.spaces.sm;
}, function (_ref2) {
  var theme = _ref2.theme;
  return theme.spaces.md;
}); // @ts-ignore

var Card = styled.div(function (_ref3) {
  var theme = _ref3.theme,
      hasImage = _ref3.hasImage;
  return {
    padding: theme.spaces.lg,
    backgroundColor: theme.colors.white[500],
    boxShadow: theme.shadows.normal,
    boxSizing: "border-box",
    borderRadius: "16px",
    height: "min-content",
    minWidth: "260px",
    position: "relative",
    marginTop: hasImage ? "90px" : theme.spaces["2xl"],
    "&[data-selected=true][data-variant='blue']": {
      outline: "2px solid ".concat(theme.colors.primary[500])
    },
    "&[data-selected=true][data-variant='green']": {
      outline: "2px solid ".concat(theme.colors.green[500])
    },
    "&[data-selected=true][data-variant='yellow']": {
      outline: "2px solid ".concat(theme.colors.yellow[500])
    },
    "&[data-selected=true][data-variant='orange']": {
      outline: "2px solid #FF8022"
    }
  };
});
var CardImage = styled.img(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 150px;\n  height: auto;\n  position: absolute;\n  right: 0;\n  top: 0;\n  transform: translate(15%, -45%);\n"])));
export default PremiumCard;