'use strict';

const index = require('./index-8277cbb3.js');
const JSS = require('./JSS-8503a151.js');

const style = {
  Container: { display: "flex", color: "var(--sl-color-neutral-600)" },
  Text: {
    maxWidth: "400px",
    display: "inline-block",
    overflow: "hidden",
    textOverflow: "ellipsis",
  },
  Link: {
    textDecoration: "none",
    color: "var(--sl-color-primary-700)",
    cursor: "pointer",
    "&:hover": {
      color: "var(--sl-color-primary-800)",
    },
  },
};
const vanillaStyle = `
:host, sqm-logout-current-user{
  display: inline;   
}

`;
const sheet = JSS.createStyleSheet(style);
const styleString = sheet.toString();
function LogoutCurrentUserView(props) {
  const { loading, filledInEmailText, onSwitchClick, switchUserText, emailErrorText, } = props;
  return (index.h("span", { class: sheet.classes.Container, part: "sqm-base" },
    index.h("style", { type: "text/css" },
      styleString,
      vanillaStyle),
    index.h("span", { class: sheet.classes.Text }, loading ? "..." : filledInEmailText || emailErrorText),
    " ",
    "(",
    index.h("span", { class: sheet.classes.Link, onClick: onSwitchClick, part: "sqm-link" }, switchUserText),
    ")"));
}

exports.LogoutCurrentUserView = LogoutCurrentUserView;
