<script setup lang="ts">
import { useNostrStore } from '@/stores/nostr'
import SupportChat from '@/components/SupportChat.vue'
import Login from '@/components/Login.vue'

const nostrStore = useNostrStore()
</script>

<template>
  <div class="container max-w-4xl mx-auto h-[calc(100vh-4rem)] py-4 px-4 sm:px-6 lg:px-8">
    <div class="h-full">
      <div class="h-full animate-in fade-in-50 slide-in-from-bottom-3">
        <Login v-if="!nostrStore.isLoggedIn" />
        <SupportChat v-else />
      </div>
    </div>
  </div>
</template>

<style scoped>
.animate-in {
  animation-duration: 0.3s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  animation-fill-mode: forwards;
}

.fade-in-50 {
  animation-name: fade-in-50;
}

.slide-in-from-bottom-3 {
  animation-name: slide-in-from-bottom-3;
}

@keyframes fade-in-50 {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slide-in-from-bottom-3 {
  from {
    transform: translateY(3px);
  }

  to {
    transform: translateY(0);
  }
}
</style>
