<template>
  <UButton color="neutral" variant="ghost" icon="i-lucide-log-out" size="xl" @click="onLogout"> Log Out </UButton>
</template>

<script setup lang="ts">
const { logout } = useAuth();
const toast = useToast();

const onLogout = () => {
  logout();
  navigateTo('/');
  toast.add({
    title: 'Successfully logged out!',
    description: 'You successfully logged out of your account and have been taken back to the website’s welcome page.',
    color: 'success',
  });
};
</script>
