<script lang="ts">
	import { resolve } from "$app/paths";
	import BookMarked from "$icon/book-marked";
	import Star from "$icon/star";
	import GitFork from "$icon/git-fork";
	import CircleDot from "$icon/circle-dot";
	import GitPullRequest from "$icon/git-pull-request";
	import StarButton from "./StarButton.svelte";
	import type { RepoCardData } from "$lib/components/profile/types";
	let {
		repo,
		starButton = true,
		showOwner = true
	}: { repo: RepoCardData; starButton?: boolean; showOwner?: boolean } = $props();

	const stats = $derived(
		[
			{ value: repo.stars, Icon: Star },
			{ value: repo.forks, Icon: GitFork },
			{ value: repo.issues, Icon: CircleDot },
			{ value: repo.pulls, Icon: GitPullRequest }
		].filter((s) => s.value !== undefined)
	);
</script>

<div
	class="flex min-h-32 flex-col gap-1 rounded border border-border-default bg-background-default px-6 py-4"
>
	<div class="flex items-start justify-between font-medium text-foreground-default">
		<div class="mt-1 mr-2 flex min-w-0 flex-1 items-center">
			<BookMarked class="mr-1.5 size-4 shrink-0 text-foreground-subtle" aria-hidden="true" />
			<a
				href={resolve(`/${repo.ownerHandle}/${repo.name}` as "/")}
				class="min-w-0 truncate text-foreground-default no-underline hover:underline"
			>
				{showOwner ? `${repo.ownerHandle}/${repo.name}` : repo.name}
			</a>
		</div>
		{#if starButton}
			<div class="ml-4 shrink-0">
				<StarButton
					repoDid={repo.repoDid}
					repoOwnerHandle={repo.ownerHandle}
					repoName={repo.name}
					initialCount={repo.stars}
					initialRkey={repo.viewerStarRkey}
				/>
			</div>
		{/if}
	</div>

	{#if repo.description}
		<p class="line-clamp-2 text-sm text-foreground-muted">{repo.description}</p>
	{/if}

	{#if repo.language !== undefined || stats.length > 0}
		<div
			class="mt-auto flex flex-wrap items-center gap-4 pt-2 font-mono text-xs text-foreground-subtle"
		>
			{#if repo.language}
				<span class="flex items-center gap-2">
					<span
						class="inline-block size-2.5 shrink-0 rounded-full"
						style="background-color: var(--color-background-success-emphasis);"
					></span>
					<span>{repo.language}</span>
				</span>
			{/if}
			{#each stats as stat (stat.Icon)}
				<span class="flex items-center gap-1">
					<stat.Icon class="size-3.5 shrink-0" aria-hidden="true" />
					<span>{stat.value}</span>
				</span>
			{/each}
		</div>
	{/if}
</div>
