import { type JSX } from 'solid-js';
import { FiUsers, FiBriefcase, FiZap, FiGrid } from 'solid-icons/fi';
import type { Car } from '@/components/home/slider/SliderContent';
import { Button } from '@/components/base/Buttons';

// Вспомогательный компонент для "таблеток" с характеристиками
const FeaturePill = (props: { icon: () => JSX.Element; label: string }) => (
    <div class="inline-flex items-center gap-2 rounded-lg bg-gray-100 px-3 py-1.5 text-sm font-medium text-gray-700">
        <div class="h-4 w-4 text-gray-500">{props.icon()}</div>
        <span>{props.label}</span>
    </div>
);

interface CarDetailsCardProps {
    car: Car;
    onBookingClick: () => void;
}

const CarDetailsCard = (props: CarDetailsCardProps) => {
    const car = () => props.car;

    if (!car()) {
        return null;
    }

    return (
        <div class="bg-white rounded-xl overflow-hidden">
            <div class="grid grid-cols-1 md:grid-cols-2">
                {/* --- Левая колонка: Изображение --- */}
                <div class="relative h-64 md:h-full min-h-[300px]">
                    <img
                        src={car().src}
                        alt={car().alt}
                        width="400"
                        height="300"
                        class="object-cover w-full h-full"
                    />
                </div>

                {/* --- Правая колонка: Информация --- */}
                <div class="flex flex-col p-6 pt-2 sm:p-8 sm:pt-4">
                    {/* Заголовок */}
                    <div>
                        <h2 class="text-3xl font-bold text-gray-900 tracking-tight">
                            {car().make} {car().model}
                        </h2>
                        <div class="mt-2 flex justify-between items-center">
                            <p class="text-lg font-medium text-gray-500">{car().year}</p>
                            <div class="bg-yellow-500 text-white px-2 py-1 rounded text-sm font-bold shadow-md">
                                {car().price}
                            </div>
                        </div>
                    </div>

                    {/* Описание */}
                    <div class="mt-6">
                        <h3 class="text-sm font-bold text-gray-500 uppercase tracking-wider">
                            Beschreibung
                        </h3>
                        <p class="mt-2 text-gray-600 leading-relaxed text-sm">
                            {car().description}
                        </p>
                    </div>

                    {/* Характеристики */}
                    <div class="mt-8">
                        <h3 class="text-sm font-bold text-gray-500 uppercase tracking-wider">
                            Ausstattung
                        </h3>
                        <div class="mt-3 flex flex-wrap gap-3">
                            <FeaturePill icon={() => <FiUsers />} label={car().seats[0] || 'N/A'} />
                            <FeaturePill icon={() => <FiBriefcase />} label={car().trunk} />
                            <FeaturePill icon={() => <FiGrid />} label={car().doors} />
                            <FeaturePill icon={() => <FiZap />} label={car().horsepower} />
                        </div>
                    </div>

                    {/* Футер с ценой и кнопкой */}
                    <div class="mt-auto pt-8">
                        <div class="border-t border-gray-200 pt-6">
                            <Button
                                variant="primary"
                                onClick={props.onBookingClick}
                                size="lg"
                                fullWidth
                                class="!bg-blue-600 hover:!bg-blue-700"
                            >
                                Jetzt Buchen
                            </Button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default CarDetailsCard;