import { h } from './index-38ad4957.js';
import { c as createStyleSheet } from './JSS-67b5cff8.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 = createStyleSheet(style);
const styleString = sheet.toString();
function LogoutCurrentUserView(props) {
  const { loading, filledInEmailText, onSwitchClick, switchUserText, emailErrorText, } = props;
  return (h("span", { class: sheet.classes.Container, part: "sqm-base" },
    h("style", { type: "text/css" },
      styleString,
      vanillaStyle),
    h("span", { class: sheet.classes.Text }, loading ? "..." : filledInEmailText || emailErrorText),
    " ",
    "(",
    h("span", { class: sheet.classes.Link, onClick: onSwitchClick, part: "sqm-link" }, switchUserText),
    ")"));
}

export { LogoutCurrentUserView as L };
