---
import CarsSlider from '@components/home/slider/CarsSlider';
import type { PriceProps } from '@/types/globalInterfaces';

const { cars = [], title = "Verfügbare Fahrzeuge", subtitle = "Wählen Sie die perfekte Option für Ihren Transfer" } = Astro.props as PriceProps;
---

<div>
    <div class="opacity-0 animate-fadeInUp delay-500">
        <CarsSlider cars={cars} client:visible />
    </div>
</div>

<style>
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .animate-fadeInUp {
        animation: fadeInUp 0.8s ease-out forwards;
    }

    .delay-500 {
        animation-delay: 0.5s;
    }
</style>