<script>
  import ArticleCard from './ArticleCard.svelte';
  let { title, description, items, onaction, onmore } = $props();
</script>

{#if items?.length}
  <section class="lane rise">
    <div class="lane-head">
      <h2>{title}</h2>
      {#if description}<span class="muted">{description}</span>{/if}
      {#if onmore}<button class="more" onclick={onmore}>see more →</button>{/if}
    </div>
    <div class="grid">
      {#each items as a (a.id)}
        <ArticleCard article={a} {onaction} />
      {/each}
    </div>
  </section>
{/if}

<style>
  .lane { margin: 34px 0; }
  .lane-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
  .lane-head h2 { font-size: 1.35rem; }
  .more { margin-left: auto; background: none; border: none; color: var(--accent-deep); font-size: 0.85rem; }
  .more:hover { text-decoration: underline; }
</style>
