<template>
  <a
      v-if="button?.url"
      :href="formatUrl(button.url)"
      target="_blank"
      class="hover:bg-brand-600 bg-brand-500 text-white h-[40px] rounded-full px-[14px] py-[10px] inline-flex gap-1.5 items-center shadow-xs text-sm"
  >
    <Plus v-if="button?.icon === 'plus'" class="w-4 h-4" />
    <ShoppingCart v-if="button?.icon === 'shopping-cart-01'" class="w-4 h-4" />
    {{ button.title }}
  </a>
</template>

<script setup>
import Plus from "@/assets/img/icons/plus.svg";
import ShoppingCart from "@/assets/img/icons/shopping-cart-01.svg";
import { formatUrl } from "@/components/helpers/common";

const props = defineProps({
  button: {
    type: Object,
    required: true,
  },
});
</script>