<script lang="ts">
	import type { RepostButtonProps } from './types';
	import { numberToHumanReadable } from '..';

	let { count, active = $bindable(false), onclick, href }: RepostButtonProps = $props();
</script>

{#snippet icon()}
	<svg
		xmlns="http://www.w3.org/2000/svg"
		fill="none"
		viewBox="0 0 24 24"
		stroke-width="1.5"
		stroke="currentColor"
		class="group-hover/post-action:bg-accent-500/10 group-hover/post-action:text-accent-700 dark:group-hover/post-action:text-accent-400 -m-1.5 size-7 rounded-full p-1.5 transition-all duration-100"
	>
		<path
			stroke-linecap="round"
			stroke-linejoin="round"
			d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
		/>
	</svg>
	{#if count}
		{numberToHumanReadable(count)}
	{/if}
{/snippet}

{#if onclick}
	<button
		class="group/post-action inline-flex cursor-pointer items-center gap-2 text-sm"
		{onclick}
	>
		{@render icon()}
	</button>
{:else if href}
	<a
		class="group/post-action inline-flex cursor-pointer items-center gap-2 text-sm"
		{href}
		target="_blank"
	>
		{@render icon()}
	</a>
{:else}
	<span class="inline-flex items-center gap-2 text-sm">
		{@render icon()}
	</span>
{/if}
