<script lang="ts" setup>
import { Icon } from '@iconify/vue';

defineEmits<{
  (e: 'click', v: MouseEvent): void;
}>();
defineProps<{
  icon: string;
  color: string;
  iconOnly?: boolean;
  solid?: boolean;
  outlined?: boolean;
  disabled?: boolean;
  dark?: boolean;
}>();
</script>

<template>
  <button
    @click="(e) => $emit('click', e)"
    class="main-btn"
    :class="{
      'main-btn__solid': solid && !outlined,
      'main-btn__outline': !solid && outlined,
      'main-btn__dark': dark,
      'main-btn__icon-only': iconOnly,
    }"
    :style="{ '--button-main-color': color }"
    :disabled="disabled"
  >
    <slot name="icon">
      <Icon :icon class="main-btn-icon" style="width: 1.2rem; height: 1.2rem" />
    </slot>
    <slot v-if="!iconOnly" />
  </button>
</template>

<style scoped>
.main-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  border-radius: var(--radius-2);
  padding-block: var(--size-1);
  padding-inline: var(--size-2);
  transition: 100ms ease-in-out;
  outline: none;

  &.main-btn__dark:not(.main-btn__outline) {
    color: white;
  }

  &:not(:disabled):hover,
  &:not(:disabled):focus {
    background: hsla(var(--button-main-color) / 0.1);
  }

  &:not(:disabled):active {
    background: hsla(var(--button-main-color) / 0.2);
  }

  & > .main-btn-icon {
    color: hsla(var(--button-main-color) / 1);
  }

  &:not(.main-btn__icon-only) > .main-btn-icon {
    margin-right: var(--size-1);
  }
}

.main-btn__solid {
  background-color: hsla(var(--button-main-color) / 1);
  color: white;

  & > .main-btn-icon {
    color: white;
  }

  &:not(:disabled):hover,
  &:not(:disabled):focus {
    background-color: hsla(var(--button-main-color) / 0.8);
  }

  &:not(:disabled):active {
    background-color: hsla(var(--button-main-color) / 0.7);
  }
}

.main-btn__outline {
  border: 1px solid hsla(var(--button-main-color) / 1);
  color: hsla(var(--button-main-color) / 1);
}

.main-btn-edit:disabled {
  filter: grayscale(1);
  opacity: 0.8;

  &.main-btn__solid {
    background: hsla(0 0% 0% / 0.08);
  }

  &.main-btn__outline {
    border: 1px solid hsla(0 0% 0% / 0.3);
  }
}
</style>
