---

const { re } = Astro.props

function formatTime(seconds) {
    if (seconds === 0) return null
    const h = Math.floor(seconds / 3600);
    const m = Math.floor((seconds % 3600) / 60);
    let result = "";
    if (h > 0) result += `${h}h`;
    if (m > 0) result += `${m}m`;
    if (result === "") result = "0m";
    return result;
}

const workTime = formatTime(re.worktime)
const waitTime = formatTime(re.waittime)
---

<p class="text-white/60 text-sm mt-1 italic">{re.description}</p>
<div class="flex pt-1 items-center">
    {re.servings !== 0 && (<p class="border-r pr-2">Serves: {re.servings}</p>)}
    {workTime && (<p class="border-r px-2">{workTime} Work</p>)}
    {waitTime && (<p class="border-r px-2">{waitTime} Wait</p>)}
    {re.rating !== 0 && (<p class="pl-2">{re.rating}</p><p class="text-white/40 text-xs">/10</p>)}
</div>