---
import type { OrderItem } from '@/data/paymentData';

export interface Props {
    items: readonly OrderItem[];
    shipping: number;
    subtotal: number;
    total: number;
}

const { items, shipping, subtotal, total } = Astro.props;
---

<div class="bg-white p-6 rounded-2xl shadow-lg border border-gray-100 sticky top-20 animate-slide-in-right">
    <h2 class="text-xl font-bold text-gray-800 border-b pb-4 mb-4">
        Ihre Bestellung
    </h2>

    <div class="space-y-4">
        {items.map((item) => (
                <div key={item.id} class="flex items-center gap-4">
                    <div class="w-16 h-16 rounded-lg overflow-hidden bg-gray-100 flex-shrink-0">
                        <img
                                src={item.imageUrl}
                                alt={item.name}
                                width={64}
                                height={64}
                                class="object-cover w-full h-full"
                        />
                    </div>
                    <div class="flex-grow">
                        <p class="font-semibold text-gray-800">{item.name}</p>
                        <p class="text-sm text-gray-500">{item.details}</p>
                    </div>
                    <div class="text-right flex-shrink-0">
                        <p class="font-semibold text-gray-800">
                            {(item.price * item.quantity).toFixed(2)} €
                        </p>
                        <p class="text-sm text-gray-500">Menge: {item.quantity}</p>
                    </div>
                </div>
        ))}
    </div>

    <div class="mt-6 pt-6 border-t border-gray-200 space-y-2 text-sm">
        <div class="flex justify-between text-gray-600">
            <span>Zwischensumme:</span>
            <span>{subtotal.toFixed(2)} €</span>
        </div>
        <div class="flex justify-between text-gray-600">
            <span>Versand:</span>
            <span>{shipping.toFixed(2)} €</span>
        </div>
    </div>

    <div class="mt-4 pt-4 border-t-2 border-dashed border-gray-200">
        <div class="flex justify-between items-center text-lg font-bold text-gray-900">
            <span>Gesamtsumme:</span>
            <span class="text-2xl text-amber-600">{total.toFixed(2)} €</span>
        </div>
    </div>
</div>

<style>
    @keyframes slide-in-right {
        from {
            opacity: 0;
            transform: translateX(30px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    .animate-slide-in-right {
        animation: slide-in-right 0.8s ease-out forwards;
    }
</style>
