<script lang="ts">
	import Icon from "$lib/components/atoms/icon.svelte";
	import Title from "$lib/components/atoms/title.svelte";
	import { convertAndFormatCurrency } from "$lib/domains/currency/view/currency.vm.svelte";
	import type { FullOrderModel } from "$lib/domains/order/data/entities";
	import CreditCardIcon from "~icons/solar/card-broken";

	let { order }: { order: FullOrderModel } = $props();

	const cardStyle =
		"flex flex-col gap-4 rounded-lg border border-gray-200 bg-white p-6 shadow-md";
</script>

<div class="flex flex-col gap-6">
	<span>TODO: SHOW PRODUCT DETSIL INFO HERE</span>

	<div class={cardStyle}>
		<div class="flex items-center gap-2">
			<Icon icon={CreditCardIcon} cls="w-5 h-5" />
			<Title size="h5" color="black">Price Summary</Title>
		</div>

		<div class="flex flex-col gap-2">
			<div class="flex items-center justify-between">
				<span>Base Price</span>
				<span>{convertAndFormatCurrency(order.basePrice)}</span>
			</div>

			{#if order.discountAmount > 0}
				<div class="flex items-center justify-between">
					<span>Discount</span>
					<span class="text-green-600">
						-{convertAndFormatCurrency(order.discountAmount)}
					</span>
				</div>
			{/if}

			<div class="mt-2 flex items-center justify-between border-t pt-2">
				<span class="font-medium">Total Price</span>
				<span class="font-medium">
					{convertAndFormatCurrency(order.displayPrice)}
				</span>
			</div>
		</div>
	</div>
</div>
