<script>
  export let pedido;
  import { createEventDispatcher } from 'svelte';

  const dispatch = createEventDispatcher();

  function marcarComoPronto() {
    // Atualiza status local (caso precise refletir no próprio componente)
    pedido.status = 'pronto';

    // Emite evento para o componente pai
    dispatch('pedidoPronto', pedido);
  }
</script>

<div class="bg-gray-700 p-4 rounded-md shadow-md text-white flex justify-between">
  <div class="flex flex-col">
    <div class="font-semibold mb-2">
      Mesa {pedido.mesa}
    </div>

    <div>
      <strong>Itens:</strong>
      <ul class="list-disc list-inside">
        {#each pedido.itens as item}
          <li>{item}</li>
        {/each}
      </ul>
    </div>
  </div>

  <div class="flex flex-col items-end gap-2 justify-between">
    <button
      class="bg-green-600 px-4 py-2 rounded-xl text-sm hover:bg-green-500"
      style="min-height: 100px;"
      on:click={marcarComoPronto}
    >
      Pedido pronto
    </button>
  </div>
</div>
