<script lang="ts">
  type Props = {
    prepTimeMin: number | null;
    cookTimeMin: number | null;
    totalTimeMin: number | null;
  };

  let { prepTimeMin, cookTimeMin, totalTimeMin }: Props = $props();

  const summary = $derived.by(() => {
    const parts: string[] = [];
    if (prepTimeMin) parts.push(`Vorb. ${prepTimeMin} min`);
    if (cookTimeMin) parts.push(`Kochen ${cookTimeMin} min`);
    if (!prepTimeMin && !cookTimeMin && totalTimeMin)
      parts.push(`Gesamt ${totalTimeMin} min`);
    return parts.join(' · ');
  });
</script>

{#if summary}
  <p class="times">{summary}</p>
{/if}

<style>
  .times {
    margin: 0 0 0.25rem;
    color: #666;
    font-size: 0.9rem;
  }
</style>
