---
// const { ingredients } = Astro.props

const { class: className, ingredients } = Astro.props
---

<!-- <div class=`bg-[#2a2b2c] rounded-lg grid grid-cols-3 text-center ${className}`>
    <span class="font-bold">Quantity</span>
    <span class="font-bold">Unit</span>
    <span class="font-bold">Food</span>
    {
        ingredients.map(ing => (
            <span>{ing.quantity}</span>
            <span>{ing.unit}</span>
            <span>{ing.name}</span>
        ))
    }

</div> -->

<table class={`table-auto bg-[#2a2b2c] rounded-lg ${className} w-full`}>
    <thead>
        <tr>
            <th class="text-center px-4 py-2">Quantity</th>
            <th class="text-center px-4 py-2">Unit</th>
            <th class="text-center px-4 py-2">Food</th>
        </tr>
    </thead>
    <tbody>
        {
        ingredients.map(ing => (
            <>
                <tr class="border-t border-gray-600">
                    <td class="text-left px-4 py-2">{ing.quantity}</td>
                    <td class="text-left px-4 py-2">{ing.unit}</td>
                    <td class="text-left px-4 py-2">{ing.name}</td>
                </tr>
            </>
        ))
        }
    </tbody>
</table>