<script lang="ts">
  import StapleChip from './StapleChip.svelte';

  type Ingredient = { id: string; name: string; isStaple: boolean };

  let { name, ingredients, onToggle }: {
    name: string;
    ingredients: Ingredient[];
    onToggle: (id: string, value: boolean) => void;
  } = $props();
</script>

<div>
  <p class="text-[10px] font-medium tracking-[.08em] uppercase text-[var(--color-text-muted)] mb-[8px]">
    {name}
  </p>
  <div class="flex flex-wrap gap-[6px]">
    {#each ingredients as ingredient (ingredient.id)}
      <StapleChip
        name={ingredient.name}
        selected={ingredient.isStaple}
        onToggle={(value) => onToggle(ingredient.id, value)}
      />
    {/each}
  </div>
</div>
