@props(['movie'])

<div class="flex flex-wrap">
    <div class="w-full md:w-1/2 lg:w-1/3 xl:w-1/4 mb-4">
        <img src="{{ $movie->poster }}" alt="{{ $movie->title }}" class="w-full h-auto rounded-lg shadow-lg">
    </div>
    <div class="w-full md:w-1/2 lg:w-2/3 xl:w-3/4 p-4">
        <h2 class="text-3xl font-bold mb-4">{{ $movie->title }}</h2>
        <p><strong>Año:</strong> {{ $movie->year }}</p>
        <p><strong>Director:</strong> {{ $movie->director }}</p>
        <p class="mb-4"><strong>Resumen:</strong> {{ $movie->synopsis }}</p>

        <a href="{{ route('catalog.edit', ['id' => $movie->id]) }}" class="bg-gray-500 text-white px-4 py-2 rounded-md hover:bg-gray-600">Editar película</a>
        <a href="{{ route('catalog.index') }}" class="bg-gray-500 text-white px-4 py-2 rounded-md hover:bg-gray-600">Volver al listado</a>
    </div>
</div>