<template>
	<div
		:class="[
			'relative w-full overflow-hidden',
			heightClasses
		]"
	>
		<!-- Angled Divider -->
		<svg
			v-if="variant === 'angle'"
			class="absolute inset-0 w-full h-full"
			preserveAspectRatio="none"
			viewBox="0 0 100 100"
		>
			<polygon
				:fill="topColor"
				:points="anglePoints.top"
			/>
			<polygon
				:fill="bottomColor"
				:points="anglePoints.bottom"
			/>
		</svg>

		<!-- Wave Divider -->
		<svg
			v-else-if="variant === 'wave'"
			class="absolute inset-0 w-full h-full"
			preserveAspectRatio="none"
			viewBox="0 0 1200 120"
		>
			<path
				:fill="topColor"
				d="M0,0 L1200,0 L1200,40 Q900,120 600,60 Q300,0 0,60 L0,0 Z"
			/>
			<path
				:fill="bottomColor"
				d="M0,120 L1200,120 L1200,40 Q900,120 600,60 Q300,0 0,60 L0,120 Z"
			/>
		</svg>

		<!-- Curve Divider -->
		<svg
			v-else-if="variant === 'curve'"
			class="absolute inset-0 w-full h-full"
			preserveAspectRatio="none"
			viewBox="0 0 100 100"
		>
			<path
				:fill="topColor"
				d="M0,0 L100,0 L100,50 Q50,100 0,50 Z"
			/>
			<path
				:fill="bottomColor"
				d="M0,100 L100,100 L100,50 Q50,100 0,50 Z"
			/>
		</svg>

		<!-- Triangle Divider -->
		<svg
			v-else-if="variant === 'triangle'"
			class="absolute inset-0 w-full h-full"
			preserveAspectRatio="none"
			viewBox="0 0 100 100"
		>
			<polygon
				:fill="topColor"
				points="0,0 100,0 100,100 50,60 0,100"
			/>
			<polygon
				:fill="bottomColor"
				points="0,100 50,60 100,100"
			/>
		</svg>

		<!-- Zigzag Divider -->
		<svg
			v-else-if="variant === 'zigzag'"
			class="absolute inset-0 w-full h-full"
			preserveAspectRatio="none"
			viewBox="0 0 100 20"
		>
			<polygon
				:fill="topColor"
				points="0,0 100,0 100,10 90,20 80,10 70,20 60,10 50,20 40,10 30,20 20,10 10,20 0,10"
			/>
			<polygon
				:fill="bottomColor"
				points="0,20 10,20 20,10 30,20 40,10 50,20 60,10 70,20 80,10 90,20 100,10 100,20"
			/>
		</svg>

		<!-- Glow line overlay -->
		<div
			v-if="glow"
			class="absolute inset-x-0 top-1/2 -translate-y-1/2 h-px"
			:style="{
				background: `linear-gradient(90deg, transparent 0%, ${glowColor} 50%, transparent 100%)`,
				boxShadow: `0 0 20px ${glowColor}`
			}"
		/>
	</div>
</template>

<script setup>
const props = defineProps({
	/** Stitch variant */
	variant: {
		type: String,
		default: 'angle',
		validator: (v) => ['angle', 'wave', 'curve', 'triangle', 'zigzag'].includes(v),
	},
	/** Top section color (CSS color) */
	topColor: {
		type: String,
		default: 'var(--color-neutral-100)',
	},
	/** Bottom section color (CSS color) */
	bottomColor: {
		type: String,
		default: 'var(--color-neutral-50)',
	},
	/** Height preset */
	height: {
		type: String,
		default: 'md',
		validator: (v) => ['sm', 'md', 'lg', 'xl'].includes(v),
	},
	/** Flip the direction */
	flip: {
		type: Boolean,
		default: false,
	},
	/** Add glow line at center */
	glow: {
		type: Boolean,
		default: false,
	},
	/** Glow line color */
	glowColor: {
		type: String,
		default: 'var(--x-glow-primary)',
	},
});

const heightClasses = computed(() => {
	const heights = {
		sm: 'h-12 md:h-16',
		md: 'h-16 md:h-24',
		lg: 'h-24 md:h-32',
		xl: 'h-32 md:h-48',
	};
	return heights[props.height];
});

const anglePoints = computed(() => {
	if (props.flip) {
		return {
			top: '0,0 100,0 100,100 0,0',
			bottom: '0,0 100,100 0,100',
		};
	}
	return {
		top: '0,0 100,0 0,100',
		bottom: '0,100 100,0 100,100',
	};
});
</script>
