---
import { markdownToHtml } from "@/lib/markdown";
import { Image } from "astro:assets";

interface Props {
    equipment: EquipmentTableComponent;
}

const equipment = Astro.props.equipment;
---

<div
    id={`equipment-${equipment.id}`}
    class="flex lg:flex-row flex-col lg:justify-center justify-center py-12 px-12 lg:container mx-auto gap-y-8 lg:gap-x-28 gap-x-18 lg:text-left text-center"
>
    <div class="flex flex-col gap-1.5">
        <h2 class="text-5xl font-bold">{equipment.title}</h2>
        { equipment.text !== null && (
            <div set:html={markdownToHtml(equipment.text)}></div>
        ) }
    </div>
    <table class="w-fit text-lg">
        <tbody>
            { equipment.items.map((item, index: number) => (
                <tr class="odd:bg-gray-100 even:bg-gray-50 my-2">
                    <th class={`text-right pr-4 py-0.5 leading-tight ps-4 ${index === 0 && "rounded-tl-2xl"} ${(index + 1) === equipment.items.length && "rounded-bl-2xl shadow-sm"}`}>
                        <div class="flex flex-row justify-end items-center gap-1.5">
                        { item.icon !== null && (
                            <Image
                                src={item.icon.url}
                                alt={item.text}
                                width="24"
                                height="24"
                            />
                        ) }
                        <span>{item.title}</span>
                        </div>
                    </th>
                    <td class={`text-left leading-tight pe-4 ${index === 0 && "rounded-tr-2xl"} ${(index + 1) === equipment.items.length && "rounded-br-2xl shadow-sm"}`}>{item.text}</td>
                </tr> 
            )) }
        </tbody>
    </table>
</div>