<script lang="ts">
  import type { ShoppingListRow } from '$lib/server/shopping/repository';
  import { formatQuantity } from '$lib/quantity-format';

  let { row, onToggle }: {
    row: ShoppingListRow;
    onToggle: (row: ShoppingListRow, next: boolean) => void;
  } = $props();

  const qtyStr = $derived(formatQuantity(row.total_quantity));
  const hasUnit = $derived(!!row.display_unit && row.display_unit.trim().length > 0);
</script>

<label class="row" class:checked={row.checked}>
  <input
    type="checkbox"
    checked={row.checked === 1}
    onchange={(e) => onToggle(row, (e.currentTarget as HTMLInputElement).checked)}
  />
  <span class="text">
    <span class="name">
      {#if qtyStr}
        <span class="qty">{qtyStr}{hasUnit ? ` ${row.display_unit}` : ''}</span>
      {/if}
      {row.display_name}
    </span>
    <span class="src">aus {row.from_recipes}</span>
  </span>
</label>

<style>
  .row {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.75rem;
    border: 1px solid #e4eae7;
    border-radius: 10px;
    background: white;
    cursor: pointer;
    min-height: 60px;
  }
  .row input {
    width: 24px;
    height: 24px;
    margin-top: 0.1rem;
    flex-shrink: 0;
    accent-color: #2b6a3d;
  }
  .text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
  .name { font-size: 1rem; }
  .qty { font-weight: 600; margin-right: 0.3rem; }
  .src { color: #888; font-size: 0.82rem; }
  .row.checked { background: #f6f8f7; }
  .row.checked .name,
  .row.checked .qty { text-decoration: line-through; color: #888; }
</style>
