<script lang="ts">
    import type { User } from '@supabase/supabase-js';

	export let data: { 
        user: User | null,
        user_profile: any | null
    };
</script>

<div class="user-profile">
    <h2 class="mb-2 text-2xl font-bold">Currently logged in</h2>
    <p><strong>Username:</strong> {data.user?.user_metadata.display_name}</p>
    <p><strong>Email:</strong> {data.user?.email}</p>
    <p><strong>Section:</strong> {data.user_profile?.section.name}</p>
    <p><strong>Position:</strong> {data.user_profile?.section_position}</p>
</div>
<button class="mt-4 rounded bg-red-500 px-4 py-2 text-white hover:bg-red-600">
    <a href="/auth/signout">Sign out</a>
</button>
