<template>
  <div :class="[color, { hovered }]" class="BlkArrowButton flex gap-16 items-center w-fit text-[18px] font-semi-bold whitespace-nowrap">
    <div class="arrow flex flex-shrink-0 items-center justify-center w-[60px] h-[60px] text-orange-600 border-1 border-orange-700 rounded-32 transition-colors">
      <svg width="17" height="14" viewBox="0 0 17 14" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M1 6.00003C0.447715 6.00003 -4.29093e-07 6.44775 -4.80824e-07 7.00003C-5.32554e-07 7.55232 0.447715 8.00003 0.999999 8.00003L1 6.00003ZM15.3181 8.00003C15.8704 8.00003 16.3181 7.55232 16.3181 7.00003C16.3181 6.44775 15.8704 6.00003 15.3181 6.00003L15.3181 8.00003ZM15.9999 7.00003L16.6853 7.72826C16.8861 7.53928 16.9999 7.27578 16.9999 7.00003C16.9999 6.72429 16.8861 6.46079 16.6853 6.27181L15.9999 7.00003ZM11.2308 1.13848C10.8286 0.759974 10.1957 0.779173 9.8172 1.18136C9.43869 1.58355 9.45789 2.21642 9.86008 2.59492L11.2308 1.13848ZM9.86008 11.4051C9.45789 11.7836 9.43869 12.4165 9.8172 12.8187C10.1957 13.2209 10.8286 13.2401 11.2308 12.8616L9.86008 11.4051ZM0.999999 8.00003L15.3181 8.00003L15.3181 6.00003L1 6.00003L0.999999 8.00003ZM16.6853 6.27181L11.2308 1.13848L9.86008 2.59492L15.3146 7.72826L16.6853 6.27181ZM15.3146 6.27181L9.86008 11.4051L11.2308 12.8616L16.6853 7.72826L15.3146 6.27181Z"
          fill="currentColor"
        />
      </svg>

    </div>
    <span><slot /></span>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';
import SvgIcon from '@/components/ui/SvgIcon.vue';

export default defineComponent({
  components: { SvgIcon },
  props: {
    color: {
      type: String as PropType<'primary' | 'secondary' | 'white'>,
      default: 'secondary',
    },
    hovered: Boolean,
  },
});
</script>

<style lang="scss">
.BlkArrowButton {
  &.secondary {
    color: #3c3d3e;

    &.hovered,
    &:hover {
      @apply text-orange-600;

      .arrow {
        color: white;
        @apply bg-orange-700;
      }
    }
  }

  &.primary {
    padding-right: 32px;

    color: #3c3d3e;

    background: #f5f5f5;
    border-radius: 100px;

    &.hovered,
    &:hover {
      @apply bg-orange-700;
    }

    .arrow {
      color: white;

      background: linear-gradient(267.87deg, #ff7426 0%, #ff5f21 100%);
    }
  }

  &.white {
    color: white;

    .arrow {
      color: #ffffff;

      border: 1px solid #ffffff;
    }

    &.hovered,
    &:hover {
      .arrow {
        color: #242628;

        background-color: white;
      }
    }
  }
}
</style>
