'use strict';

const index = require('./index-8277cbb3.js');
const index_module = require('./index.module-f8c8495f.js');
const JSS = require('./JSS-8503a151.js');
const mixins = require('./mixins-4761d472.js');

function NavigationSidebarItemView(props) {
  const { states, data, padding = "x-small" } = props;
  const backgroundColor = props.backgroundColor || "var(--sqm-portal-background)";
  const backgroundHoverColor = props.backgroundHoverColor || "var(--sqm-primary-button-background-hover)";
  const backgroundFocusedColor = props.backgroundFocusedColor || "var(--sqm-primary-button-background)";
  const textFocusedColor = props.textFocusedColor || "var(--sqm-primary-button-color)";
  const style = {
    ItemContainer: {
      display: "flex",
      "background-color": `${states.active ? backgroundFocusedColor : backgroundColor}`,
      borderRadius: props.borderRadius
        ? `${props.borderRadius}px`
        : "var(--sqm-border-radius-normal)",
      padding: `var(--sl-spacing-${padding})`,
      "text-decoration": "none",
      color: states.active
        ? textFocusedColor
        : props.textColor || "var(--sqm-text)",
      "align-items": "center",
      ...mixins.gap({ direction: "row", size: "var(--sl-font-size-small)" }),
      "&:hover": {
        cursor: "pointer",
        background: states.active
          ? backgroundFocusedColor
          : backgroundHoverColor,
        color: states.active
          ? textFocusedColor
          : props.textHoverColor || "var(--sqm-primary-button-color-hover)",
      },
    },
    Label: {
      margin: "0",
    },
    Icon: {
      "flex-shrink": "0",
    },
  };
  const sheet = JSS.createStyleSheet(style);
  const styleString = sheet.toString();
  return (index.h("a", { part: "sqm-link", href: data.path, onClick: (e) => {
      e.preventDefault();
      index_module.jn.push(data.path);
    }, class: sheet.classes.ItemContainer },
    index.h("style", { type: "text/css" }, styleString),
    index.h("sl-icon", { class: sheet.classes.Icon, name: data.icon }),
    index.h("p", { class: sheet.classes.Label, part: "sqm-label" }, data.label)));
}

exports.NavigationSidebarItemView = NavigationSidebarItemView;
