<script lang="ts">
	import { User } from 'lucide-svelte';
	import * as Card from '$lib/components/ui/card';
	import type { PageData } from './$types';

	let { data }: { data: PageData } = $props();
</script>

<div class="space-y-6">
	<div>
		<h1 class="text-2xl font-bold tracking-tight flex items-center gap-2">
			<User class="h-6 w-6" />
			Mi cuenta
		</h1>
		<p class="text-muted-foreground text-sm mt-1">Perfil y configuración personal.</p>
	</div>
	<Card.Root class="max-w-lg">
		<Card.Header>
			<Card.Title>Perfil</Card.Title>
		</Card.Header>
		<Card.Content class="space-y-2 text-sm">
			{#if data.user}
				<div><span class="text-muted-foreground">Nombre:</span> {data.user.name ?? data.user.preferred_username ?? '—'}</div>
				<div><span class="text-muted-foreground">Email:</span> {data.user.email ?? '—'}</div>
			{:else}
				<p class="text-muted-foreground">No hay datos de usuario disponibles.</p>
			{/if}
		</Card.Content>
	</Card.Root>
</div>
