<script setup lang="ts">
import { chatbubbleOutline } from "ionicons/icons";
import IconParkOutlineApplicationMenu from "~icons/icon-park-outline/application-menu";
import News from "./components/news.vue";
import Rwa from "./components/rwa.vue";

function openChat() {
  window.open("https://chat.riwsan.com/", "_blank");
}
</script>

<template>
  <ion-page>
    <ion-header class="ion-no-border">
      <ion-toolbar class="ion-toolbar">
        <ion-button slot="start" fill="clear" class="z-1" @click="$router.push('/global-menu')">
          <IconParkOutlineApplicationMenu slot="icon-only" />
        </ion-button>
        <ion-title>{{ $t('home.title') }}</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content :fullscreen="true" class="ion-padding">
      <!-- <pwa-install-button class="mb-4" /> -->
      <Rwa />
      <News />
    </ion-content>
    <ion-fab horizontal="end" vertical="bottom" @click="openChat">
      <ion-fab-button>
        <ion-icon :icon="chatbubbleOutline" />
      </ion-fab-button>
    </ion-fab>
  </ion-page>
</template>

<style lang="css" scoped>
ion-fab {
  margin-bottom: var(--ion-safe-area-bottom, 0);
}
ion-fab-button::part(native) {
  background: linear-gradient(to right, rgb(93, 230, 83), rgb(22, 119, 255));
  border-radius: 20px;
  box-shadow:
    0px 1px 2px 0px rgba(0, 0, 0, 0.3),
    0px 1px 3px 1px rgba(0, 0, 0, 0.15);
  color: white;
}
</style>
