<template>
  <div
    v-if="!isRegistered && show"
    id="noticeBeforeAnnounce"
    class="bg-amber-200 text-amber-900 border-amber-500 border-dashed border text-center rounded-md overflow-hidden px-4 py-3 mt-4"
    role="alert"
    aria-live="polite"
  >
    <p class="mb-4">
      Before you can publicly announce a new project or time commitment, a
      friend needs to register you.
    </p>
    <button
      class="inline-block text-md bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md"
      @click="shareInfo"
    >
      Share Your Info
    </button>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Emit } from "vue-facing-decorator";

@Component({ name: "RegistrationNotice" })
export default class RegistrationNotice extends Vue {
  @Prop({ required: true }) isRegistered!: boolean;
  @Prop({ required: true }) show!: boolean;

  @Emit("share-info")
  shareInfo() {}
}
</script>
