'use strict';

var React = require('react');
var styled = require('@emotion/styled');
var miscTheme = require('./miscTheme.js');
var index = require('./index-7ab0b2c3.js');
var classNames = require('classnames');
var index$1 = require('./index-af9c3c64.js');
var index$2 = require('./index-a31ed3e1.js');

function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

function _interopNamespace(e) {
  if (e && e.__esModule) return e;
  var n = Object.create(null);
  if (e) {
    Object.keys(e).forEach(function (k) {
      if (k !== 'default') {
        var d = Object.getOwnPropertyDescriptor(e, k);
        Object.defineProperty(n, k, d.get ? d : {
          enumerable: true,
          get: function () { return e[k]; }
        });
      }
    });
  }
  n["default"] = e;
  return Object.freeze(n);
}

var React__namespace = /*#__PURE__*/_interopNamespace(React);
var styled__default = /*#__PURE__*/_interopDefault(styled);
var classNames__default = /*#__PURE__*/_interopDefault(classNames);

/* eslint-disable prettier/prettier */
const ArrowRightBlue = (props) => (React__namespace.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 6 10", fill: "none" }, props),
    React__namespace.createElement("path", { d: "M1 9L5 5L1 1", stroke: "#2D87F3", strokeWidth: 1.75, strokeLinecap: "round", strokeLinejoin: "round" })));

/* eslint-disable prettier/prettier */
const Clinic = (props) => (React__namespace.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 20 20", fill: "none" }, props),
    React__namespace.createElement("path", { d: "M4.89646 16.9996H2.96549C2.43225 16.9996 2 16.5674 2 16.0341V12.6549C2 12.1217 2.43225 11.6895 2.96549 11.6895H4.89646", stroke: "currentColor", strokeWidth: 1.2, strokeLinecap: "round", strokeLinejoin: "round" }),
    React__namespace.createElement("path", { d: "M15.0342 11.6895H16.9652C17.4984 11.6895 17.9306 12.1217 17.9306 12.6549V16.0341C17.9306 16.5674 17.4984 16.9996 16.9652 16.9996H15.0342", stroke: "currentColor", strokeWidth: 1.2, strokeLinecap: "round", strokeLinejoin: "round" }),
    React__namespace.createElement("path", { d: "M5.86197 3H14.0686C14.6015 3 15.0341 3.43263 15.0341 3.96549V16.9995H4.89648V3.96549C4.89648 3.43263 5.32912 3 5.86197 3Z", stroke: "currentColor", strokeWidth: 1.2, strokeLinecap: "round", strokeLinejoin: "round" }),
    React__namespace.createElement("path", { d: "M11.172 13.6206H8.7583V16.9998H11.172V13.6206Z", stroke: "currentColor", strokeWidth: 1.2, strokeLinecap: "round", strokeLinejoin: "round" }),
    React__namespace.createElement("path", { d: "M9.96533 9.99996V5.65527", stroke: "currentColor", strokeWidth: 1.2, strokeLinecap: "round", strokeLinejoin: "round" }),
    React__namespace.createElement("path", { d: "M12.1377 7.82764H7.79297", stroke: "currentColor", strokeWidth: 1.2, strokeLinecap: "round", strokeLinejoin: "round" })));

const StyledInsuranceList = styled__default["default"].ul `
  display: grid;
  grid-gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  list-style: none;
`;
const StyledInsuranceItem = styled__default["default"].li `
  p {
    margin-top: 8px;
    text-align: center;
  }

  .insuranceLogo {
    display: grid;
    height: 58px;
    border: 1px solid ${miscTheme.theme.colors.neutral200};
    border-radius: 6px;
    place-content: center;

    > img {
      width: 93px;
      height: 43px;
      object-fit: contain;
    }
  }
`;

const InsuranceList = ({ insurances, className, isName = true, }) => {
    if (!insurances.length)
        return null;
    return (React__namespace["default"].createElement(StyledInsuranceList, { id: "insurance-list", className: className }, insurances.map((insurance) => (React__namespace["default"].createElement(StyledInsuranceItem, { className: "insuranceItem", key: insurance.id },
        React__namespace["default"].createElement("div", { className: "insuranceLogo" },
            React__namespace["default"].createElement("img", { src: insurance.logo, alt: insurance.name || 'insurance-logo' })),
        isName && (React__namespace["default"].createElement(index.Text, { size: "base", color: miscTheme.theme.colors.gray500, type: "bold" }, insurance.name)))))));
};

const StyledPaymentList = styled__default["default"].div `
  display: flex;
  flex-wrap: wrap;
  gap: 7px;

  &.paymentList {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    justify-content: center;
  }
`;
const StyledPaymentItem = styled__default["default"].div `
  border: 1px solid ${miscTheme.theme.colors.neutral100};
  border-radius: 12px;
  width: 80px;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;

  &.payment-item-mobile {
    width: 100%;
  }

  .logo {
    position: relative;
    width: 55px;
    aspect-ratio: 55 / 32;
    object-fit: contain;
  }

  .txt-caption-1 {
    font-size: 0.6875rem;
    line-height: 1rem;
    color: ${miscTheme.theme.colors.gray800};
  }
`;

const PaymentList = ({ payments, className, isName = true, isMobile = false, }) => {
    if (!payments.length)
        return null;
    return (React__namespace["default"].createElement(StyledPaymentList, { id: "payment-container", className: classNames__default["default"](className, {
            paymentList: isMobile && payments.length >= 4,
        }) }, payments.map((payment) => (React__namespace["default"].createElement(StyledPaymentItem, { className: classNames__default["default"]('payment-item', {
            'payment-item-mobile': isMobile && payments.length >= 4,
        }), key: payment.id },
        React__namespace["default"].createElement(index$1.ImageWrap, { className: "logo", src: payment.logo, alt: payment.name }),
        isName && React__namespace["default"].createElement("div", { className: "txt-caption-1" }, payment.name))))));
};

const StyledContainer = styled__default["default"].div `
  display: flex;
  gap: 8px;

  .icon {
    width: 1.25rem;
    height: 1.25rem;
    color: ${miscTheme.theme.colors.gray400};
    flex-shrink: 0;
  }

  .doctor-info-item-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
`;
styled__default["default"](Clinic) `
  width: 1.25rem;
  height: 1.25rem;
`;
const StyledContentBox = styled__default["default"].div `
  display: flex;
  flex-direction: column;
  gap: 4px;
`;

const DoctorExpertiseItem = (props) => {
    const { doctorInfo, Icon, title } = props;
    return (React__namespace["default"].createElement(StyledContainer, null,
        React__namespace["default"].createElement(Icon, { className: "icon" }),
        React__namespace["default"].createElement(StyledContentBox, null,
            React__namespace["default"].createElement(index$2.Text, { size: "p3", weight: "semiBold", color: "#111111" }, title),
            React__namespace["default"].createElement("div", { className: "doctor-info-item-content" }, (Array.isArray(doctorInfo) ? doctorInfo : [doctorInfo]).map((info) => (React__namespace["default"].createElement(index$2.Text, { size: "p3", weight: "regular", key: info }, info)))))));
};

const StyledIntroductionSection = styled__default["default"].div `
  display: flex;
  padding: 1rem;
  width: 100%;
  justify-content: space-between;
`;
const StyledTextIntroSection = styled__default["default"].div `
  display: flex;
  flex-direction: column;
  gap: 2px;
`;

const DoctorInfoExpertise = (props) => {
    const { name, specialty, experience, profileImage } = props;
    return (React__namespace["default"].createElement(StyledIntroductionSection, null,
        React__namespace["default"].createElement(StyledTextIntroSection, null,
            React__namespace["default"].createElement(index$2.Text, { size: "title2", weight: "semiBold", color: "#111111" }, name),
            React__namespace["default"].createElement("div", null,
                specialty && (React__namespace["default"].createElement(index$2.Text, { size: "c1", weight: "regular" }, specialty)),
                experience && (React__namespace["default"].createElement(index$2.Text, { size: "c1", weight: "regular" }, experience)))),
        React__namespace["default"].createElement(index$1.ImageWrap, { src: profileImage, alt: name, style: {
                width: '4.5rem',
                height: '4.5rem',
                borderRadius: '50%',
                objectFit: 'cover',
                flexShrink: 0,
            } })));
};

exports.ArrowRightBlue = ArrowRightBlue;
exports.Clinic = Clinic;
exports.DoctorExpertiseItem = DoctorExpertiseItem;
exports.DoctorInfoExpertise = DoctorInfoExpertise;
exports.InsuranceList = InsuranceList;
exports.PaymentList = PaymentList;
