<template>
  <button class="submit-btn" type="submit">
    <span>{{ text }}</span>
    <img :src="imageUrl" alt="" />
  </button>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      default: ''
    },
    imageUrl: {
      type: String,
      default: ''
    },
  },
}
</script>

<style lang="scss" scoped>
.submit-btn {
  background: $color-button;
  color: #fff;
  padding: 0.75rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 0.2s ease;
  text-transform: uppercase;
  &:hover {
    background: white;
    color: $color-button;
    border: 1px solid $color-button;
  }
}
</style>
