---
import Layout from "../../layouts/Layout.astro"
import { getCollection, render } from 'astro:content';
const uslugi = await getCollection('uslugi');
---

<Layout tytul="Usługi">
    <h2 class="text-2xl mb-1">Usługi</h2>
    <hr>
    <div class="flex flex-col gap-4">
        Lista udzielanych przezemnie usług
        {uslugi.map(async (usluga, indeks) => {
            const { Content } = await render(usluga);
            return (
                <div class={`
                    rounded-md min-h-80 p-2
                    bg-slate-100 drop-shadow-md drop-shadow-slate-400
                    text-left flex-col
                    flex ${indeks % 2 ? "lg:flex-row-reverse lg:text-right" : "lg:flex-row lg:text-left"}
                `}>
                    <div class="mx-auto text-white bg-black drop-shadow-slate-300 drop-shadow-md rounded-md p-4 aspect-[2.5/4] w-54 flex">
                        <span class="m-auto">[coś]</span>
                    </div>
                    <div class="grow lg:mx-4 flex flex-col">
                        <h1 class="text-2xl my-1">{usluga.data.tytul}</h1>
                        <div class="mx-0.5"> 
                            <h3 class="text-xl"><span class="font-medium">Cena:</span> <span class="text-gray-700">{usluga.data.cena}</span> zł</h3>
                            <Content />
                        </div>
                    </div>
                </div>
            )
        })}
    </div>
</Layout>