<script lang="ts">
	import { resolve } from "$app/paths";
	import Newspaper from "$icon/newspaper";
	import Compass from "$icon/compass";
	import EmptyState from "#lib/components/ui/EmptyState.svelte";
	import FollowCard from "#lib/components/profile/FollowCard.svelte";
	import RepoCard from "#lib/components/repo/RepoCard.svelte";
	import { repoKey, type PersonData, type RepoCardData } from "#lib/components/profile/types.ts";
	import StepHeader from "#lib/components/welcome/StepHeader.svelte";
	import Button from "#lib/components/ui/Button.svelte";

	let {
		people,
		repos,
		onInteract
	}: {
		people: PersonData[];
		repos: RepoCardData[];
		onInteract?: () => void;
	} = $props();

	const timelineHref = resolve("/timeline");

	const interacted = (active: boolean) => {
		if (active) onInteract?.();
	};
</script>

<div class="flex flex-col gap-xl">
	<StepHeader title="Discover" subtitle="Find users to follow and repositories to star." />

	{#if people.length > 0 || repos.length > 0}
		{#if people.length > 0}
			<div class="flex flex-col gap-sm">
				{#each people as person (person.did)}
					<FollowCard
						{person}
						border
						onFollow={(change) => interacted(change.following)}
					/>
				{/each}
			</div>
		{/if}

		{#if repos.length > 0}
			<div class="flex flex-col gap-sm">
				{#each repos as repo (repoKey(repo))}
					<RepoCard {repo} border onStar={(change) => interacted(change.starred)} />
				{/each}
			</div>
		{/if}
	{:else}
		<EmptyState icon={Compass} message="No suggestions yet." messageDirection="vertical">
			<Button href={timelineHref} icon={Newspaper} variant="ghost">Browse the timeline</Button
			>
		</EmptyState>
	{/if}
</div>