<script setup lang="ts">
import { useRuntimeConfig, useSeoMeta } from "#app";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Field, FieldDescription } from "@/components/ui/field";

import { useAuthStore } from "~/stores/auth";
import { useBreadcrumbStore } from "~/stores/breadcrumbs";

const authStore = useAuthStore();
await authStore.init();

const breadcrumbStore = useBreadcrumbStore();
breadcrumbStore.setBreadcrumbs([{ label: "Auth" }, { label: "Logout", to: "/auth/logout" }]);

const config = useRuntimeConfig();
useSeoMeta({
  title: "Glowing Fiesta - Logout",
  ogTitle: "Glowing Fiesta - Logout",
  description: "This is the logout page of a very nice all-purpose application",
  ogDescription: "This is the logout page of a very nice all-purpose application",
  ogImage: config.public.siteUrl + "/images/human.png",
});
</script>

<template>
  <div class="bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min flex items-center justify-center gap-2">
    <div class="flex w-full max-w-sm flex-col gap-6">
      <Card>
        <CardHeader class="text-center">
          <CardTitle class="text-xl">Logout</CardTitle>
          <CardDescription>Are you sure you want to logout?</CardDescription>
        </CardHeader>
        <CardContent>
          <form autocomplete="off" @submit.prevent="authStore.signOut()">
            <Field>
              <Button type="submit" variant="destructive">Logout</Button>
            </Field>
          </form>
        </CardContent>
      </Card>
      <FieldDescription class="px-6 text-center">
        <NuxtLink to="/"><Button variant="link">Home</Button></NuxtLink>
        <NuxtLink to="/"><Button variant="link">Terms of Service</Button></NuxtLink>
        <NuxtLink to="/"><Button variant="link">Privacy Policy</Button></NuxtLink>
      </FieldDescription>
    </div>
  </div>
</template>
