<script lang="ts">
	import { resolve } from '$app/paths';
	import { goto } from '$app/navigation';
	import { logout } from '$lib/api';
	import { Button } from '$lib/components/ui/button/index.js';
	import { LogOut } from '@lucide/svelte';
</script>

<h1 class="text-lg font-semibold">Account Settings</h1>
<p class="text-sm text-muted-foreground">Manage your account</p>

<div class="mt-4 flex flex-col gap-2">
	<Button
		onclick={async () => {
			await logout();
			goto(resolve('/login'));
		}}
		variant="outline"
		class="w-32"
	>
		<LogOut />
		Logout
	</Button>
</div>
