<script lang="ts">
	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 } from "$lib/components/profile/types";
	import StepHeader from "./StepHeader.svelte";
	import { people, trendingRepos } from "./mock";
</script>

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

	{#if people.length > 0 || trendingRepos.length > 0}
		{#if people.length > 0}
			<div class="flex flex-col gap-3">
				{#each people as person (person.did)}
					<FollowCard {person} border />
				{/each}
			</div>
		{/if}

		{#if trendingRepos.length > 0}
			<div class="flex flex-col gap-3">
				{#each trendingRepos as repo (repoKey(repo))}
					<RepoCard {repo} border />
				{/each}
			</div>
		{/if}
	{:else}
		<EmptyState message="Nothing to suggest right now — you can explore once you're set up." />
	{/if}
</div>
