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

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

{!tableView && (
    <div class={`bg-[#2a2b2c] p-3 rounded-lg w-full text-left ${className}`}>
    {
        ingredients.map(ing => (
            <div class="text-white/70">
                <p>• {ing.quantity}&nbsp;{ing.unit}&nbsp;{ing.name}</p>
            </div>
        ))
    }

    </div>
)}

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