<template>
	<div class="animate-pulse">
		<!-- Form skeleton -->
		<div v-if="variant === 'form'" class="space-y-6">
			<div v-for="i in fields" :key="i" class="space-y-2">
				<div class="h-4 w-24 bg-gray-200 rounded"></div>
				<div class="h-12 bg-gray-200 rounded-lg"></div>
			</div>
		</div>

		<!-- Delivery methods skeleton -->
		<div v-else-if="variant === 'delivery'" class="space-y-4">
			<div class="h-5 w-48 bg-gray-200 rounded mb-4"></div>
			<div v-for="i in 3" :key="i" class="p-5 border-2 border-gray-200 rounded-lg">
				<div class="flex justify-between">
					<div class="space-y-2">
						<div class="h-5 w-32 bg-gray-200 rounded"></div>
						<div class="h-4 w-48 bg-gray-200 rounded"></div>
						<div class="h-4 w-20 bg-gray-200 rounded mt-2"></div>
					</div>
					<div class="h-5 w-5 bg-gray-200 rounded-full"></div>
				</div>
			</div>
		</div>

		<!-- Order summary skeleton -->
		<div v-else-if="variant === 'summary'" class="space-y-4">
			<div v-for="i in 2" :key="i" class="flex gap-4">
				<div class="h-20 w-20 bg-gray-200 rounded"></div>
				<div class="flex-1 space-y-2">
					<div class="h-4 w-3/4 bg-gray-200 rounded"></div>
					<div class="h-4 w-1/2 bg-gray-200 rounded"></div>
					<div class="h-4 w-20 bg-gray-200 rounded"></div>
				</div>
			</div>
			<hr class="my-4" />
			<div class="space-y-2">
				<div class="flex justify-between">
					<div class="h-4 w-24 bg-gray-200 rounded"></div>
					<div class="h-4 w-16 bg-gray-200 rounded"></div>
				</div>
				<div class="flex justify-between">
					<div class="h-4 w-20 bg-gray-200 rounded"></div>
					<div class="h-4 w-16 bg-gray-200 rounded"></div>
				</div>
				<div class="flex justify-between pt-2">
					<div class="h-5 w-16 bg-gray-200 rounded"></div>
					<div class="h-5 w-20 bg-gray-200 rounded"></div>
				</div>
			</div>
		</div>

		<!-- Button skeleton -->
		<div v-if="showButton" class="mt-8">
			<div class="h-12 bg-gray-200 rounded-full w-full"></div>
		</div>
	</div>
</template>

<script setup lang="ts">
defineProps<{
	variant: "form" | "delivery" | "summary";
	fields?: number;
	showButton?: boolean;
}>();
</script>
