<!-- Базовая кнопка: темы/размеры, флаг icon, wide/disabled/active. title подставляется из текста дефолтного слота -->
<template>
  <button
    :class="[
      theme ? `--${theme}` : '',
      `--${size}`,
      icon && `--icon`,
      {'--wide': wide},
      {'--disabled': disabled},
      {'--active': active},
    ]"
    :type="type"
    v-bind="$attrs"
    :title="title || slotText"
    class="ui-btn"
  >
    <slot/>
  </button>
</template>

<script setup lang="ts">
import type { ButtonThemes } from '../../types';

withDefaults(
  defineProps<{
    type?: 'button' | 'submit' | 'reset',
    theme?: ButtonThemes
    size?: 'm' | 's' | 'l',
    icon?: boolean,
    wide?: boolean,
    disabled?: boolean,
    active?: boolean,
    title?: string,
  }>(),
  {
    type: 'button',
    size: 'm',
  }
);

const slots = useSlots();

const slotText = computed(() => {
  const content = slots.default?.();
  if (!content) return '';
  return content
    .map(vnode => vnode.children)
    .filter(c => typeof c === 'string')
    .join(' ');
});
</script>

<style lang="scss">
.ui-btn {
  @include font-sm;

  display: grid;
  min-height: 36px;
  grid-auto-flow: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding-block: 8px;
  padding-inline: 12px;
  width: max-content;
  font-weight: 500;
  color: var(--button-text, #{$button-text});
  border-radius: $radius-lg;
  text-decoration: none;
  user-select: none;
  white-space: nowrap;
  text-transform: capitalize;
  border: 1px solid var(--button-border, #{$button-border});

  @include from-br(sm) {
    padding-inline: 16px;
  }
}

.ui-btn.--l {
  @include font-base;

  min-height: 48px;
  font-weight: 500;
}

.ui-btn.--s {
  @include font-sm;

  min-height: 32px;
  padding: 6px 12px;
  column-gap: 6px;
  border-radius: $radius-lg;
}

.ui-btn.--disabled {
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: none;
  user-select: none;
}

.ui-btn.--primary {
  background-color: var(--button-bg, #{$button-primary-bg});

  @include hover(background-color) {
    &:not([disabled], .--disabled) {
      background-color: var(--button-bg--hover, #{$button-primary-bg--hover});
    }
  }
}

.ui-btn.--secondary {
  background-color: var(--button-bg, #{$button-secondary-bg});
  color: var(--button-text, #{$button-secondary-text});
  border-color: var(--button-border, #{$button-secondary-border});

  @include hover(background-color) {
    &:not(.--active, [disabled], .--disabled) {
      background-color: var(--button-bg--hover, #{$button-secondary-bg--hover});
    }
  }
}

.ui-btn.--active.--secondary {
  background-color: var(--button-bg--active, #{$button-secondary-bg--active});
  color: var(--button-text--active, #{$button-secondary-text--active});
  border-color: var(--button-border--active, #{$button-secondary-border--active});
}

.ui-btn.--icon {
  padding: 8px;
  border-radius: 50%;
}

.ui-btn.--wide {
  width: 100%;
}

.ui-btn .ui-icon {
  pointer-events: none;
}

.ui-btn.--muted {
  background-color: var(--button-bg, #{$button-muted-bg});
  color: var(--button-text, #{$button-muted-text});
  border-color: var(--button-border, #{$button-muted-border});

  @include hover(background-color, border) {
    background-color: var(--button-bg--hover, #{$button-muted-bg--hover});
    border-color: var(--button-border--hover, #{$button-muted-border--hover});
  }
}

.ui-btn.--warning {
  background-color: var(--button-bg, #{$button-warning-bg});
  border: 1px solid var(--button-border, #{$button-warning-border});
  color: var(--button-text, #{$button-warning-text});

  @include hover(background-color) {
    background-color: var(--button-bg--hover, #{$button-warning-bg--hover});
  }
}

/* Без подложки, рамки и паддингов — обычная текстовая ссылка с иконкой */
.ui-btn.--simple {
  min-height: 0;
  padding: 0;
  column-gap: 4px;
  color: var(--button-text, #{$button-simple-text});
  background-color: transparent;
  border-color: transparent;
  border-radius: 0;

  @include hover(color) {
    color: var(--button-text--hover, #{$button-simple-text--hover});
  }
}
</style>
