<script lang="ts">
	import Seo from '$lib/components/SEO.svelte';
	import { Avatar } from '@skeletonlabs/skeleton';

	export let data;

	$: ({ posts } = data);
</script>

<Seo
	title="{data.user.username}'s profile"
	description="users profile with posts"
	keywords="profile posts user"
	type="Person"
/> 

<div class="flex justify-center flex-col items-center relative">
	<!-- Detailed -->
	{#each posts as post}
		<div class="card max-w-3xl mb-4 w-full" style="max-width: 600px; height: auto;">
			<div class="card-container">
				<div class="card-content p-4 space-y-4">
					<h3 class="h3" data-toc-ignore style="overflow-wrap: break-word;">{post.title}</h3>
					<article>
						<p style="overflow-wrap: break-word;">
							{post.content}
						</p>
					</article>
				</div>
				<hr class="card-divider" style="opacity: 0.5;" />
				<footer class="p-4 flex justify-start items-center space-x-4">
					<Avatar initials={post.author_username.charAt(0)} width="w-8" />
					<div class="flex-auto flex justify-between items-center">
						<h6 class="font-bold">
							By <a href="/profile/{post.author_username}">{post.author_username}</a>
						</h6>
						<small>On {post.created_at.toLocaleDateString()}</small>
					</div>
				</footer>
			</div>
		</div>
	{/each}
</div>
