<template>
  <component
    :is="tag"
    class="andale_search_insights-ui-button"
    :class="buttonClasses"
    :type="resolvedType"
    :disabled="tag === 'button' ? disabled : null"
    :href="tag === 'a' ? href : null"
    @click="onClick"
  >
    <span class="andale_search_insights-ui-button__content">
      <slot />
    </span>
  </component>
</template>

<script>
import { computed } from 'vue';

export default {
  name: 'UiButton',
  props: {
    tag: {
      type: String,
      default: 'button',
    },
    href: {
      type: String,
      default: '',
    },
    type: {
      type: String,
      default: 'button',
    },
    variant: {
      type: String,
      default: 'default',
    },
    size: {
      type: String,
      default: 'md',
    },
    block: {
      type: Boolean,
      default: false,
    },
    blockOnSmall: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  emits: ['click'],
  setup(props, { emit }) {
    const buttonClasses = computed(() => ([
      `andale_search_insights-ui-button--${props.variant}`,
      `andale_search_insights-ui-button--${props.size}`,
      props.block ? 'andale_search_insights-ui-button--block' : '',
      props.blockOnSmall ? 'andale_search_insights-ui-button--block-sm' : '',
      props.disabled ? 'andale_search_insights-ui-button--disabled' : '',
    ].filter(Boolean)));

    const resolvedType = computed(() => (props.tag === 'button' ? props.type : null));

    const onClick = (event) => {
      if (props.disabled) {
        event.preventDefault();
        return;
      }
      emit('click', event);
    };

    return {
      buttonClasses,
      resolvedType,
      onClick,
    };
  },
};
</script>

<style>
.andale_search_insights-ui-button {
  border: 1px solid #c3c4c7;
  border-radius: 8px;
  background: #fff;
  color: #2c3338;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.andale_search_insights-ui-button__content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.andale_search_insights-ui-button--sm {
  padding: 4px 10px;
  font-size: 13px;
  line-height: 1.45;
}

.andale_search_insights-ui-button--md {
  padding: 6px 14px;
  font-size: 14px;
  line-height: 1.5;
}

.andale_search_insights-ui-button--lg {
  padding: 8px 16px;
  font-size: 16px;
  line-height: 1.5;
}

.andale_search_insights-ui-button--default:hover:not(.andale_search_insights-ui-button--disabled) {
  background: #f6f7f7;
}

.andale_search_insights-ui-button--primary {
  border-color: #2271b1;
  background: #2271b1;
  color: #fff;
}

.andale_search_insights-ui-button--primary:hover:not(.andale_search_insights-ui-button--disabled) {
  background: #1f67a1;
  border-color: #1f67a1;
}

.andale_search_insights-ui-button--info {
  border-color: #2271b1;
  color: #2271b1;
}

.andale_search_insights-ui-button--info:hover:not(.andale_search_insights-ui-button--disabled) {
  background: #eef7fc;
}

.andale_search_insights-ui-button--disabled {
  cursor: default;
  color: #8c8f94;
  background: #f6f7f7;
  border-color: #dcdcde;
}

.andale_search_insights-ui-button--block {
  width: 100%;
}

@media (max-width: 540px) {
  .andale_search_insights-ui-button--block-sm {
    width: 100%;
  }
}
</style>
