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

interface CarSliderCardProps {
    car: Car;
    onDetailsClick: () => void;
}

const CarSliderCard = (props: CarSliderCardProps) => {
    const car = () => props.car;

    const allFeatures = () => [
        { icon: <FiUsers class="text-blue-500" />, label: car().seats.join(' / ') },
        { icon: <FiGrid class="text-blue-500" />, label: car().doors },
        { icon: <FiBriefcase class="text-blue-500" />, label: car().trunk },
        { icon: <FiZap class="text-blue-500" />, label: car().horsepower },
    ];

    return (
        <div
            class="bg-white rounded-2xl shadow-xl overflow-hidden flex flex-col group transition-all duration-500 hover:shadow-2xl border border-gray-100 h-full w-full"
        >
            <div class="relative h-64 w-full overflow-hidden">
                <img
                    src={car().src}
                    alt={car().alt}
                    width="400"
                    height="256"
                    class="absolute inset-0 h-full w-full object-cover transition-transform duration-700 group-hover:scale-110"
                />
                <div class="absolute inset-0 bg-linear-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
                <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">
                        {car().make} {car().model}
                    </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">
                    {car().price}
                </div>
            </div>

            <div class="p-6 grow flex flex-col bg-linear-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">{car().make} {car().model}</h3>
                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                        {car().year}
                    </span>
                </div>
                <p class="text-gray-600 text-sm mb-4 grow">
                    {car().description}
                </p>

                <ul class="grid grid-cols-2 gap-x-4 gap-y-3 mb-6">
                    <For each={allFeatures()}>
                        {(feature: { icon: JSX.Element, label: string }) => (
                            <li class="flex items-center text-sm">
                                <div class="mr-2 shrink-0 flex items-center justify-center w-5 h-5">{feature.icon}</div>
                                <span class="text-gray-700">{feature.label}</span>
                            </li>
                        )}
                    </For>
                </ul>

                <div class="mt-auto">
                    <Button
                        variant="primary"
                        fullWidth
                        onClick={props.onDetailsClick}
                        size="lg"
                        class="bg-blue-600! hover:bg-blue-700!"
                    >
                        Details Ansehen
                    </Button>
                </div>
            </div>
        </div>
    );
};

export default CarSliderCard;