<script lang="ts">
	import { resolve } from "$app/paths";
	import type { Snippet } from "svelte";
	import Card, { type CardVariants } from "#lib/components/ui/Card.svelte";
	import RepoCardContent from "#lib/components/repo/RepoCardContent.svelte";
	import type { RepoCardData, StarChange } from "#lib/components/profile/types.ts";
	import { navigatingTo } from "#lib/navPulse.ts";
	let {
		repo,
		starButton = true,
		showOwner = true,
		uniformHeight = false,
		layout = "card",
		links = true,
		border = true,
		background = true,
		padding = "regular",
		onStar,
		action,
		class: className
	}: {
		repo: RepoCardData;
		onStar?: (change: StarChange) => void;
		starButton?: boolean;
		showOwner?: boolean;
		uniformHeight?: boolean;
		layout?: "card" | "row";
		links?: boolean;
		border?: CardVariants["border"];
		background?: CardVariants["background"];
		padding?: CardVariants["padding"];
		action?: Snippet;
		class?: string;
	} = $props();

	const href = $derived(resolve(`/${repo.ownerHandle}/${repo.name}` as "/"));
</script>

{#snippet body()}
	<RepoCardContent {repo} {starButton} {showOwner} {uniformHeight} {layout} {links} {onStar} />
{/snippet}

<Card
	{border}
	{background}
	{padding}
	class={[navigatingTo(href) && "row-breathe", className].filter(Boolean).join(" ") || undefined}
>
	{#if action}
		<div class="flex h-full items-start gap-sm">
			<div class="flex min-w-0 flex-1 flex-col self-stretch">
				{@render body()}
			</div>
			{@render action()}
		</div>
	{:else}
		{@render body()}
	{/if}
</Card>