<script setup lang="ts">
type ClickType = 'cancel' | 'draft' | 'submit'

const props = defineProps<{
  label: string
}>()

const emit = defineEmits<{
  (e: 'click', type: ClickType): void
}>()

function onClick(type: ClickType) {
  emit('click', type)
}

</script>

<template>
  <Button
    @click="onClick('draft')"
    class="flex items-center gap-2 rounded-full border border-orange-400 bg-orange-50 px-3 py-1 text-sm font-medium text-orange-600 hover:bg-orange-100"
  >
    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
    </svg>
    {{ props.label }}
  </Button>
</template>
