<script lang="ts">
	import { followers } from '$lib/Data/AniList/following';
	import RateLimited from '$lib/Error/RateLimited.svelte';
	import Skeleton from '$lib/Loading/Skeleton.svelte';
	import InputTemplate from './InputTemplate.svelte';

	let submission = '';
	let randomSeed = 0;
</script>

<InputTemplate
	field="Username"
	bind:submission
	event="Random Follower"
	submitText="Generate"
	onSubmit={() => (randomSeed = Math.random())}
>
	{#await followers(submission)}
		<Skeleton card={false} count={1} height="0.9rem" list />
	{:then users}
		{@const user = users[Math.floor(randomSeed * users.length)]}

		<p />

		<a href={`https://anilist.co/user/${user.id}`} target="_blank">
			{user.name}
		</a>
	{:catch}
		<RateLimited type="Followers" list={false} />
	{/await}
</InputTemplate>
