<script lang="ts">
	import { stringRawHref } from "#lib/components/strings/urls.ts";
	import type { RepoBlobView } from "#lib/api/blob.ts";
	import type { MarkupContext } from "#lib/markup/paths.ts";
	import { compactRelativeTime } from "#lib/format.ts";
	import type { StringRecord } from "#lib/api/records.ts";
	import BlobView from "#lib/components/repo/BlobView.svelte";
	import StringHeader from "#lib/components/strings/StringHeader.svelte";

	interface Props {
		ownerHandle: string;
		ownerDid: string;
		rkey: string;
		string: StringRecord;
		blob: RepoBlobView;
		markup: MarkupContext;
		isOwner?: boolean;
		uri: string;
		cid?: string;
		starCount: number | Promise<number>;
		viewerStarRkey: string | null | Promise<string | null>;
		onedit?: () => void;
		ondelete?: () => void;
		deleting?: boolean;
	}

	let {
		ownerHandle,
		ownerDid,
		rkey,
		string,
		blob,
		markup,
		isOwner = false,
		uri,
		cid,
		starCount,
		viewerStarRkey,
		onedit,
		ondelete,
		deleting = false
	}: Props = $props();

	const rawHref = $derived(stringRawHref(ownerHandle, rkey));
	const timeLabel = $derived(`Created ${compactRelativeTime(string.createdAt)}`);
</script>

<div class="flex flex-col gap-xl">
	<div class="px-md">
		<StringHeader
			{ownerHandle}
			{ownerDid}
			{rkey}
			filename={blob.path}
			description={string.description}
			{isOwner}
			stringUri={uri}
			stringCid={cid}
			initialStarCount={starCount}
			initialStarRkey={viewerStarRkey}
			{onedit}
			{ondelete}
			{deleting}
		/>
	</div>

	<BlobView {ownerHandle} {blob} {markup} {rawHref} {timeLabel} />
</div>