<script lang="ts">
	import type { Component, Snippet } from "svelte";
	import type { SvelteHTMLElements } from "svelte/elements";
	import { resolve } from "$app/paths";
	import Link from "#lib/components/ui/Link.svelte";
	import { tv } from "tailwind-variants";
	import { toLines } from "#lib/components/settings/descriptionLines.ts";

	interface Props {
		icon?: Component<SvelteHTMLElements["svg"]>;
		title?: string;
		href?: string;
		description?: string | string[];
		tags?: Snippet;
		meta?: Snippet;
		label?: Snippet;
		children?: Snippet;
		align?: "center" | "start";
		stack?: boolean;
	}

	let {
		icon,
		title,
		href,
		description,
		tags,
		meta,
		label,
		children,
		align = "center",
		stack = false
	}: Props = $props();

	const row = tv({
		slots: {
			base: "flex min-h-2xl w-full justify-between",
			actions: "flex items-center gap-xs empty:hidden"
		},
		variants: {
			stack: {
				true: {
					base: "flex-col justify-center gap-xs sm:flex-row sm:justify-between sm:gap-md",
					actions: "w-full justify-end sm:w-auto sm:shrink-0"
				},
				false: {
					base: "gap-md",
					actions: "shrink-0"
				}
			},
			align: {
				start: {},
				center: {}
			}
		},
		compoundVariants: [
			{ align: "start", stack: false, class: { base: "items-start" } },
			{ align: "start", stack: true, class: { base: "sm:items-start" } },
			{ align: "center", stack: false, class: { base: "items-center" } },
			{ align: "center", stack: true, class: { base: "sm:items-center" } }
		]
	});

	const classes = $derived(row({ stack, align }));

	const Glyph = $derived(icon);
	const lines = $derived(toLines(description));
</script>

<div class={classes.base()}>
	{#if label}
		{@render label()}
	{:else}
		<span class="flex min-w-0 flex-col gap-2xs">
			<span class="flex min-w-0 flex-wrap items-center gap-xs">
				{#if Glyph}
					<Glyph class="size-3.5 shrink-0 text-foreground-default" aria-hidden="true" />
				{/if}
				{#if href}
					<Link
						href={resolve(href as "/")}
						variant="inherit"
						class="min-w-0 wrap-anywhere">{title}</Link
					>
				{:else}
					<span
						data-testid="settingsRowTitle"
						class="min-w-0 typography-paragraph-regular wrap-anywhere text-foreground-default"
						>{title}</span
					>
				{/if}
				{#if tags}
					{@render tags()}
				{/if}
			</span>
			{#if meta}
				{@render meta()}
			{:else}
				{#each lines as line (line)}
					<span class="typography-paragraph-regular wrap-anywhere text-foreground-muted"
						>{line}</span
					>
				{/each}
			{/if}
		</span>
	{/if}
	{#if children}
		<div class={classes.actions()}>
			{@render children()}
		</div>
	{/if}
</div>