<template>
  <button
    class="button"
    :class="{
      active: isActive,
      disabled,
      [mediaQueryClassName]: mediaQueryClassName,
      [className]: className
    }"
    @click="disabled || !onClick ? NOOP() : onClick($event)"
    @dblclick="disabled ? NOOP : onDoubleClick"
    @mouseup="disabled ? NOOP : onDoubleClick"
    :disabled="disabled"
    :title="title"
  >
    <slot />
  </button>
</template>

<script setup>
  const NOOP = (e) => {
    e?.stopPropagation()
    e?.preventDefault()
  }
  const { img } = defineProps({
    title: String,
    isActive: Boolean,
    disabled: Boolean || undefined,
    className: String,
    mediaQueryClassName: String,
    img: String,
    onClick: Function,
  })
  const isBase64 = img?.trim().startsWith('data:')
  const isGlyph = img && !isBase64 && (!img.includes('.') || img.startsWith('<svg'))
</script>

<style lang="scss">
  .button {
    padding: 5px;
    margin-right: 8px;
    border: none;
    background-color: transparent;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    cursor: pointer;
    color: var(--c-text);
  }
  .with-text {
    padding-left: 8px;
    padding-right: 8px;
    span {
      margin-left: 8px;
      font-size: 12px;
      line-height: 16px;
      white-space: nowrap; 
    }
  }
  @media screen and (max-width: 577px) {
    .button {
      &:not(.disabled):active {
        background-color: var(--c-header-button-hover);
      }
      &:not(.disabled).active {
        background-color: var(--c-header-button-active);
      }
      &.disabled {
        opacity: 0.3;
        pointer-events: none;
      }
      .arrow-left {
        margin-left: 9px;
      }
    }
  }
  @media screen and (min-width: 578px) {
  .button {
      &:not(.disabled):hover {
        background-color: var(--c-header-button-hover);
      }
      &:not(.disabled).active {
        background-color: var(--c-header-button-active);
      }
      &.disabled {
        opacity: 0.3;
        pointer-events: none;
      }
      .arrow-left {
        margin-left: 9px;
      }
    }
  }
</style>
