<script lang="ts">
	import Icon from "$lib/components/atoms/icon.svelte";
	import Title from "$lib/components/atoms/title.svelte";
	import MaxWidthWrapper from "$lib/components/molecules/max-width-wrapper.svelte";
	import CheckIcon from "~icons/ic/round-check";
</script>

<div class="grid min-h-[80vh] w-full place-items-center px-4 sm:px-6">
	<MaxWidthWrapper
		cls="flex flex-col gap-6 sm:gap-8 items-center justify-center"
	>
		<div
			class="flex w-full max-w-md flex-col items-center justify-center gap-6 rounded-xl bg-white p-4 drop-shadow-lg sm:gap-8 sm:p-6 md:p-8 md:py-12 lg:max-w-xl"
		>
			<div
				class="rounded-full bg-emerald-100 p-1.5 text-emerald-600 drop-shadow-lg sm:p-2"
			>
				<Icon
					icon={CheckIcon}
					cls="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12"
				/>
			</div>

			<Title size="h3" center weight="medium">Booking confirmed</Title>

			<p
				class="w-full max-w-prose text-center text-sm text-gray-600 sm:text-base"
			>
				Thank you for booking your flight! Your order has been placed
				successfully. You will receive a confirmation email shortly.
			</p>
			<p
				class="w-full max-w-prose text-center text-sm text-gray-600 sm:text-base"
			>
				In it you will not only find the booking details, but also a
				tracking number for your flight.
			</p>
		</div>
	</MaxWidthWrapper>
</div>
