<script setup lang="ts">
import type { ButtonType } from '#layers/types/components/button'

interface props {
  type?: ButtonType
  href?: string
  backgroundImage: string
  alt: string
  disabled?: boolean
}

const props = withDefaults(defineProps<props>(), {
  type: 'action',
  disabled: false,
})

const componentTag = computed((): string => {
  switch (props.type) {
    case 'external':
      return 'a'
    case 'download':
      return props.href ? 'a' : 'button'
    case 'internal':
      return 'AtomsLocaleLink'
    default:
      return 'button'
  }
})
const componentProps = computed(() => {
  if (props.type === 'external') {
    return {
      href: props.href,
      target: '_blank',
    }
  }

  if (props.type === 'internal') {
    if (props.href) {
      return {
        to: props.href,
        target: '_self',
      }
    }
    return {}
  }

  if (props.type === 'download') {
    if (props.href) {
      return {
        href: props.href,
        target: '_self',
        download: props.href?.split('/').pop() ?? 'download',
      }
    }
    return {}
  }

  return {}
})
const buttonStyle = computed(() => {
  return {
    backgroundImage: props.backgroundImage,
  }
})
</script>

<template>
  <component
    :is="componentTag"
    v-bind="{ ...componentProps }"
    :class="['btn-base', { disabled: props.disabled }]"
    :style="buttonStyle"
    :disabled="props.disabled"
  >
    <img
      v-if="props.backgroundImage"
      :src="props.backgroundImage"
      :alt="props.alt"
      class="btn-bg"
    />
  </component>
</template>

<style scoped>
.btn-base {
  @apply overflow-hidden relative inline-flex items-center justify-center h-[48px] md:h-[64px] rounded-[8px] md:rounded-[10px] cursor-pointer
    after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:bg-white after:transition-opacity after:duration-300 after:ease-in-out after:opacity-0
    hover:after:opacity-20;
}

.btn-base.disabled {
  @apply cursor-default pointer-events-none
  after:opacity-20 after:z-[2];
}

.btn-bg {
  @apply w-full h-full object-contain;
}
</style>
