---
import Button from '../base/Button.astro';
import type { VehicleCardProps } from '@/types/globalInterfaces';

const { vehicle } = Astro.props as VehicleCardProps;

const displayedFeatures = vehicle.features.slice(0, 3);
const extraFeaturesCount = Math.max(0, vehicle.features.length - 3);

// Подготавливаем объект для передачи в форму (адаптируем поля под формат Car из формы)
const vehicleDataForForm = JSON.stringify({
    id: vehicle.id,
    make: vehicle.brand,
    model: vehicle.model,
    year: vehicle.year,
    price: vehicle.price,
    src: vehicle.imageUrl,
    seats: vehicle.seats,
    name: vehicle.name,
    tagline: vehicle.tagline,
    description: vehicle.description,
    capacity: vehicle.capacity,
    doors: vehicle.doors_count,
    horsepower: vehicle.horsepower,
    trunk: vehicle.trunk_capacity,
    features: vehicle.features
});
---

<div class="vehicle-card bg-white rounded-2xl shadow-xl overflow-hidden flex flex-col border border-gray-100 h-full">
    <div class="relative h-64 w-full overflow-hidden group">
        <img
                src={vehicle.imageUrl}
                alt={`Bild von ${vehicle.name}`}
                width="400"
                height="256"
                class="absolute inset-0 h-full w-full object-cover transition-transform duration-700 group-hover:scale-110"
                loading="lazy"
        />
        <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
        <div class="absolute bottom-4 left-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity duration-500">
            <h3 class="text-xl font-bold text-white drop-shadow-lg">
                {vehicle.name}
            </h3>
        </div>
        <div class="absolute top-2 right-2 bg-yellow-500 text-white px-2 py-1 rounded text-sm font-bold shadow-md">
            {vehicle.price}
        </div>
    </div>

    <div class="p-6 flex-grow flex flex-col bg-gradient-to-b from-white to-gray-50">
        <div class="flex justify-between items-start mb-3">
            <h3 class="text-xl font-bold text-gray-800">{vehicle.name}</h3>
            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                Premium
            </span>
        </div>
        <p class="text-blue-600 font-semibold text-sm mb-3">
            {vehicle.tagline}
        </p>
        <p class="text-gray-600 text-sm mb-4 flex-grow">
            {vehicle.description}
        </p>

        <ul class="space-y-3 mb-6">
            <li class="flex items-center text-sm">
                <svg class="text-blue-500 mr-2 flex-shrink-0 w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
                <span class="text-gray-700 font-medium">
                  {vehicle.capacity}
                </span>
            </li>

            {displayedFeatures.map((feature, index) => (
                    <li class="flex items-center text-sm" key={index}>
                        <svg class="text-green-500 mr-2 flex-shrink-0 w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
                        <span class="text-gray-700">{feature}</span>
                    </li>
            ))}

            {extraFeaturesCount > 0 && (
                    <li class="text-xs text-blue-600 font-medium ml-6">
                        +{extraFeaturesCount} weitere Funktionen
                    </li>
            )}
        </ul>

        <div class="w-full">
            <Button
                variant="blue"
                size="md"
                fullWidth={true}
                class="js-fleet-book-btn"
                data-vehicle={vehicleDataForForm}
            >
                Details & Buchung
            </Button>
        </div>
    </div>
</div>

<style>
    .vehicle-card {
        transition: transform 0.5s ease, box-shadow 0.5s ease;
    }
    .vehicle-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    }
</style>