<template>
  <button
    v-if="!link"
    @click="handlerClick"
    :class="[
      'app-btn',
      `group-${group}`,
      { inline: inline },
      addClass,
      color,
      size,
    ]"
    :style="{ width: `${width}px` }"
  >
    <slot></slot>
  </button>
  <a
    v-if="link"
    :href="href"
    :target="target"
    :class="['app-link', addClass, color, size]"
    :style="{ width: `${width}px` }"
  >
    <slot></slot>
  </a>
</template>

<script>
export default {
  name: "app-button",
  props: {
    addClass: { type: String, default: "" },
    color: {
      type: String,
      default: "second",
      validator: function (value) {
        return [
          "second",
          "prime",
          "danger",
          "upsale",
          "promo",
          "outline",
          "link",
        ].includes(value);
      },
    },
    group: {
      type: String,
      default: "none",
      validator: function (value) {
        return ["left", "right", "center"].includes(value);
      },
    },
    size: {
      type: String,
      default: "normal",
      validator: function (value) {
        return ["small", "large", "normal"].includes(value);
      },
    },
    width: { type: Number },
    link: { type: Boolean, default: false },
    href: { type: String, default: "" },
    target: { type: String, default: "" },
    inline: { type: Boolean, default: false },
  },
  emits: ["click"],
  methods: {
    handlerClick() {
      this.$emit("click");
    },
  },
};
</script>

<style lang="sass" scoped>
@import "../assets/_vars"
.app-btn, .app-link
  display: flex
  justify-content: center
  align-items: center
  padding: 12px 24px
  width: auto
  height: 40px
  background: white
  border: 1px solid $green1
  border-radius: 4px
  cursor: pointer
  font-size: 14px
  line-height: 16px
  letter-spacing: 0.1px
  color: $gray3
  transition: all 0.3s ease 0s
  &.inline
    display: inline-flex
  &:hover
    background: $gray4
  &:focus, &:active
    background: $gray7
  &:disabled
    background: $gray7 !important
    border-color: $gray7 !important
    color: $gray1 !important
    pointer-events: none
  &.prime
    background: $green1
    border-color: $none
    color: white
    &:hover
      background: $green2
    &:focus, &:active
      background: $green3
  &.danger
    background: $red1
    border-color: $none
    color: white
    &:hover
      background: $red2
    &:focus, &:active
      background: $red3
  &.upsale
    background: $gradient1
    border-color: transparent #FFC107 transparent #FF5722
    color: white
    &:hover
      background: $gradient2
      border-color: transparent #EBAE10 transparent #EB5526
    &:focus, &:active
      background: $gradient3
      border-color: transparent #D7A317 transparent #D7542B
  &.promo
    background: $yellow1
    border-color: $none
    color: $gray3
    &:hover
      background: $yellow2
    &:focus, &:active
      background: $yellow3
  &.outline
    background: white
    border: 1px solid $gray5
    color: $gray3
    &:hover
      background: $gray4
    &:focus, &:active
      background: $gray7
  &.link
    background: $none
    border-color: $none
    color: $blue1
    &:hover
      background: $gray4
    &:focus, &:active
      background: $gray7
      color: $blue2
  &.small
    padding: 8px 16px
    height: 32px
  &.large
    padding: 18px 32px
    height: 56px
    font-size: 16px
    line-height: 20px
    letter-spacing: 0.2px
  &.group
    &-right
      margin-left: 8px
    &-left
      margin-right: 8px
    &-center
      margin-left: 8px
      margin-right: 8px
</style>

