<script>
	/** @typedef {import('../../index.d').Badge} BadgeProps */
	/** @type {BadgeProps} */
	let {
		text = '',
		radius = 'full',
		isLeft = false,
		isShow = true,
		offsetY = 0,
		offsetX = 0,
		isInner = false,
		injClass = '',
		children,
	} = $props();

	// 圆角风格样式
	// radius style
	const radiusObj = {
		full: ' rounded-full',
		base: ' rounded',
		none: ' rounded-none',
		leftLeaf: ' rounded-full rounded-br-none',
		rightLeaf: ' rounded-full rounded-bl-none',
	};

	// 通过radius配置圆角风格或叶形
	// set radius style or leaf style by radius
	const radiusClass = radius === 'leaf' ? (isLeft ? radiusObj.leftLeaf : radiusObj.rightLeaf) : radiusObj[radius] || radiusObj.full;
</script>

{#if isInner}
	<div
		class={`px-1 text-xs text-white whitespace-nowrap${radiusClass}${
			text === '' ? ' w-3 h-3' : ' '
		} text-center leading-4 transition-all bg-[red]${injClass === '' ? '' : ` ${injClass}`}`}
		style={`transform:${isShow ? ' scale(1)' : ' scale(0)'}`}
	>
		{text}
	</div>
{:else}
	<div class="relative">
		{@render children?.()}
		<div
			class={`absolute${text === '' ? ' -top-1.5' : ' -top-2'}${
				isLeft ? ' left-0' : ' right-0'
			} px-1 text-xs text-white whitespace-nowrap${radiusClass}${
				text === '' ? ' w-3 h-3' : ' '
			} text-center leading-4 transition-all bg-[red]${injClass === '' ? '' : ` ${injClass}`}`}
			style={`transform: translateX(calc(${isLeft ? '-' : ''}50% ${isLeft ? '+' : '-'} ${offsetX}px)) translateY(${offsetY}px)${
				isShow ? ' scale(1)' : ' scale(0)'
			}`}
		>
			{text}
		</div>
	</div>
{/if}
