<script lang="ts">
	import { onMount } from 'svelte';
	import { currentUser } from '$lib/stores/user';
	import { goto } from '$app/navigation';
	import UserProfile from '$lib/components/user/UserProfile.svelte';
	import FavoriteLocations from '$lib/components/user/FavoriteLocations.svelte';
	import AllianceCard from '$lib/components/user/AllianceCard.svelte';

	onMount(() => {
		if (!$currentUser) {
			goto('/join?r=/profile');
		}
	});
</script>

<svelte:head>
	<title>Profile - FurryPlace</title>
</svelte:head>

{#if $currentUser}
	<div class="mx-auto max-w-6xl px-4 py-6">
		<h1 class="text-3xl font-bold mb-6">Profile</h1>

		<div class="grid gap-6 lg:grid-cols-2">
			<div class="space-y-6">
				<UserProfile />
				<AllianceCard />
			</div>

			<div>
				<FavoriteLocations />
			</div>
		</div>
	</div>
{:else}
	<div class="flex min-h-screen items-center justify-center">
		<div class="text-center">
			<p class="text-lg">Loading...</p>
		</div>
	</div>
{/if}
