import { type Component, Show } from 'solid-js';
import { FaSolidUsers, FaSolidTag } from 'solid-icons/fa';
import type { Car } from '../home/slider/SliderContent';

export const BookingCarSummary: Component<{ car?: Car }> = (props) => (
    <Show when={props.car}>
        {(car) => (
            <div class="bg-gray-50 p-4 rounded-lg border border-gray-200 transition-all hover:shadow-md mb-6">
                <p class="text-sm font-semibold text-gray-600 mb-2">Ihre Auswahl:</p>
                <div class="flex flex-col sm:flex-row items-start sm:items-center gap-4">
                    <img src={car().src} alt={`${car().make} ${car().model}`} class="w-24 h-16 object-cover rounded-md shadow-sm" />
                    <div class="flex-grow">
                        <h4 class="font-bold text-gray-900">{car().make} {car().model} ({car().year})</h4>
                    </div>
                </div>

                {/* Блок с информацией о вместимости и цене под изображением */}
                <div class="mt-3 flex flex-wrap gap-4 text-sm text-gray-600">
                    <div class="flex items-center gap-1.5">
                        <FaSolidUsers />
                        <span>{car().seats[0]}</span>
                    </div>
                    <div class="flex items-center gap-1.5">
                        <FaSolidTag />
                        <span>{car().price}</span>
                    </div>
                </div>
            </div>
        )}
    </Show>
);