<script lang="ts">
	import type { Did, Handle } from "@atcute/lexicons/syntax";
	import type { Snippet } from "svelte";
	import type { Moderation } from "#lib/api/moderationLabels.ts";
	import type { ProfileRecord } from "#lib/api/records.ts";
	import ProfileChrome from "#lib/components/profile/ProfileChrome.svelte";
	import type { ProfileCounts } from "#lib/components/profile/types.ts";

	interface Identity {
		did: Did;
		handle: Handle;
	}

	interface Props {
		identity: Identity | Promise<Identity>;
		profile: ProfileRecord | null | Promise<ProfileRecord | null>;
		counts: ProfileCounts | Promise<ProfileCounts>;
		viewerFollowRkey?: string | null | Promise<string | null | undefined>;
		notJoined: boolean | Promise<boolean>;
		bobbinUrl: string;
		delegationDid?: string;
		activeTab: string;
		moderation?: Moderation | Promise<Moderation | undefined>;
		content: Snippet;
	}

	let {
		identity: identityProp,
		profile: profileProp,
		counts: countsProp,
		viewerFollowRkey: viewerFollowRkeyProp,
		notJoined: notJoinedProp,
		bobbinUrl,
		delegationDid,
		activeTab,
		moderation: moderationProp,
		content
	}: Props = $props();

	// an await here suspends the whole navigation, so awaits live below the boundary
	const identity = $derived(await identityProp);
	const profile = $derived(await profileProp);
	const loadedCounts = $derived(await countsProp);
	const viewerFollowRkey = $derived(await viewerFollowRkeyProp);
	const notJoined = $derived(await notJoinedProp);
	const moderation = $derived(await moderationProp);
</script>

<ProfileChrome
	{identity}
	{profile}
	{loadedCounts}
	{viewerFollowRkey}
	{notJoined}
	{bobbinUrl}
	{delegationDid}
	{activeTab}
	{moderation}
	{content}
/>