<template>
  <button
    type="button"
    :disabled="disabled || loading"
    class="group relative w-full cursor-pointer overflow-hidden rounded-[4px] border border-[rgb(5_5_5_/_6%)] bg-[#fefefe] py-2.5 text-center font-semibold select-none disabled:opacity-60 disabled:cursor-not-allowed"
    @click="$emit('click')"
  >
    <span class="inline-block transition-all duration-300 group-hover:translate-x-10 group-hover:opacity-0">
      <slot />
    </span>
    <span
      class="absolute inset-0 z-10 flex items-center justify-center gap-1.5 bg-[#C83A35] text-white opacity-0 transition-all duration-300 group-hover:opacity-100 rounded-[4px]"
    >
      <svg v-if="loading" class="inline-block size-4 animate-spin" viewBox="0 0 24 24" fill="none">
        <circle cx="12" cy="12" r="10" stroke="rgb(255 255 255 / 25%)" stroke-width="3" />
        <path d="M12 2a10 10 0 0 1 10 10" stroke="white" stroke-width="3" stroke-linecap="round" />
      </svg>
      <template v-else>
        <slot />
        <svg class="size-4 transition-transform duration-300 group-hover:translate-x-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M5 12h14" />
          <path d="m12 5 7 7-7 7" />
        </svg>
      </template>
    </span>
  </button>
</template>

<script setup lang="ts">
defineProps<{
  loading?: boolean;
  disabled?: boolean;
}>();

defineEmits<{
  click: [];
}>();
</script>
