@props(['vehicle', 'fuelType', 'brand', 'class', 'vendor'])

@php
	/** @var \App\Models\Vehicle $vehicle */
@endphp

<div
	class="flex flex-col w-full max-w-[40rem] min-h-[40rem] p-6 space-y-6 overflow-hidden rounded-lg shadow-md bg-zinc-800 text-red-400 m-auto border border-red-400">
	<div>
		<img src="{{ asset('img/vehicles/' . $vehicle->getImagePath()) }}" alt="Photo of {{ $vehicle->getName() }}"
		     class="rounded-xl" width="100%">
	</div>

	<div class="flex flex-col justify-between flex-1">
		<header>
			<div class="mt-4">
				<h1 class="text-3xl clamp one-line">{{ $vehicle->getName() }}</h1>
				<span class="mt-2 block text-zinc-400 text-xs">{{ __('Brand') }}: {{ $brand }}</span>
				<span class="mt-2 block text-zinc-400 text-xs">{{ __('Class') }}: {{ $class }}</span>
				<span class="mt-2 block text-zinc-400 text-xs">{{ __('Storage') }}: {{ $vehicle->getStorage() }}</span>
				<span class="mt-2 block text-zinc-400 text-xs">{{ __('Fuel Type') }}: {{ $fuelType }}</span>
				<span class="mt-2 block text-zinc-400 text-xs">{{ __('Fuel Volume') }}: {{ $vehicle->getFuelVolume() }}</span>
				<span class="mt-2 block text-zinc-400 text-xs">{{ __('Seats') }}: {{ $vehicle->getSeats() }}</span>
				<span class="mt-2 block text-zinc-400 text-xs">{{ __('Price') }}: {{ $vehicle->getPrice() }}</span>
				<span class="mt-2 block text-zinc-400 text-xs">{{ __('Top Speed') }}: {{ $vehicle->getTopSpeed() }}</span>
			</div>
		</header>

		<footer class="flex justify-between items-center mt-8">
			<div class="flex items-center text-sm">
				<h5 class="font-bold mr-3">
					<p>{{ __('Sold at') }}: {{ $vendor }}</p>
				</h5>
			</div>
		</footer>
	</div>
</div>