<script setup>
import SettingsTab from "@/layouts/SettingsTab.vue";
import PrimaryButton from "@/components/Buttons/PrimaryButton.vue";
import Daily from "@/components/Settings/NotificationSettings/Daily.vue";
import { storeToRefs } from "pinia";
import { useSettingsStore } from "@/stores/SettingsStore";

const settingsStore = useSettingsStore();
const { notificationSettings } = storeToRefs(settingsStore);

const handleUpdate = () => {
  settingsStore.updateNotificationSettings();
};
</script>

<template>
  <SettingsTab>
    <template #title>
      <div>{{ $t("notifications") }}</div>
    </template>
    <template #description>
      {{ $t("notifications_desc") }}
    </template>

    <Daily v-model="notificationSettings.daily" />

    <template #actions>
      <PrimaryButton class="max-w-fit mt-5" @click="handleUpdate">
        {{ $t("save") }}
      </PrimaryButton>
    </template>
  </SettingsTab>
</template>
