<template>
  <div class="invoices-empty">
    <img
      src="/flag.svg"
      class="mb-40"
    >

    <h2>
      {{ $t('your_invoices_will_be_displayed_here.title') }}
    </h2>

    <h4 class="invoices-empty__text">
      {{ $t('your_invoices_will_be_displayed_here.content') }}
    </h4>

    <UiButton
      size="large"
      class="mt-40 w-100"
      :href="`/create/invoice/${id}`"
    >
      {{ $t('create_an_invoice') }}
    </UiButton>
  </div>
</template>

<script setup>
defineProps({ id: { type: String, required: true } })

defineEmits(['create'])
</script>

<style lang="scss">
.invoices-empty {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 422px;
  align-self: center;
  justify-self: center;

  &__text {
    color: $clr-grey-400;
    margin-top: 8px;
  }
}
</style>
