<script lang="ts">
import * as m from '$lib/paraglide/messages.js';

interface Props {
	outCount: number;
	inCount: number;
	senderName: string;
	receiverName: string;
}

let { outCount, inCount, senderName, receiverName }: Props = $props();

const total = $derived(outCount + inCount);
const outPct = $derived(total > 0 ? (outCount / total) * 100 : 0);
const shortSenderName = $derived(senderName.split(' ')[0] ?? senderName);
const shortReceiverName = $derived(receiverName.split(' ')[0] ?? receiverName);

const ariaLabel = $derived(m.dist_bar_aria({ outCount, senderName, inCount, receiverName }));
const outSegmentText = $derived(m.dist_bar_segment({ count: outCount, name: shortSenderName }));
const inSegmentText = $derived(m.dist_bar_segment({ count: inCount, name: shortReceiverName }));
</script>

<div
	class="flex flex-col gap-1 border-b border-line bg-muted px-[18px] py-2"
	role="img"
	aria-label={ariaLabel}
>
	<div class="flex justify-between text-sm font-bold">
		<span class="inline-flex items-center gap-1 text-primary"
			>{outSegmentText}
			<img
				src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Long-Arrow/Long-Arrow-Right-MD.svg"
				alt=""
				aria-hidden="true"
				class="inline h-3.5 w-3.5 opacity-60"
			/></span
		>
		<span class="inline-flex items-center gap-1 text-accent"
			>{inSegmentText}
			<img
				src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Long-Arrow/Long-Arrow-Left-MD.svg"
				alt=""
				aria-hidden="true"
				class="inline h-3.5 w-3.5 opacity-60"
			/></span
		>
	</div>
	<div class="flex h-[5px] overflow-hidden rounded-full bg-line">
		<div
			data-testid="dist-bar-segment"
			class="h-full bg-primary transition-all"
			style="width: {outPct}%"
		></div>
		<div
			data-testid="dist-bar-segment"
			class="h-full bg-accent transition-all"
			style="width: {100 - outPct}%"
		></div>
	</div>
</div>
