<script>
  const sortOptions = [
    { value: 'date-desc',    label: 'Newest first' },
    { value: 'date-asc',     label: 'Oldest first' },
    { value: 'country-asc',  label: 'Country A → Z' },
    { value: 'country-desc', label: 'Country Z → A' },
  ];

  let { sortKey, onSort } = $props();
</script>

<header class="toolbar">
  <h1 class="page-title">My Journey</h1>
  <div class="sort-control">
    <select id="sort-select" onchange={(e) => onSort(e.currentTarget.value)}>
      {#each sortOptions as opt}
        <option value={opt.value} selected={opt.value === sortKey}>{opt.label}</option>
      {/each}
    </select>
  </div>
</header>

<style>
  .toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
  }

  .page-title {
    font-size: var(--text-xl);
    font-weight: 400;
    color: var(--text-h);
    letter-spacing: -0.5px;
    margin: 0;
  }

  select {
    font-family: var(--sans);
    font-size: var(--text-xs);
    font-weight: 300;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 6px 28px 6px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-subtle);
    color: var(--text);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2352525b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: border-color 0.15s, color 0.15s;
  }
  select:hover { border-color: var(--border-bright); color: var(--text-h); }
  select:focus { outline: 1px solid var(--accent-border); outline-offset: 2px; }
</style>
