Untitled

<script lang="ts">
  import { RangeSlider } from '@skeletonlabs/skeleton';
  import { goto } from '$app/navigation';
  import type { PageData } from './$types';

  export let data: PageData;

  const minBudget = 100;
  const maxBudget = 800;
  const step = 50;

  interface Listing {
    name: string;
    price: number;
    shippingCost: number;
    supplier: string;
    url: string;
  }

  let budget = maxBudget;
  $: listings = data.listings;

  $: {
    console.log('Current budget:', budget);
    console.log('Current listings:', listings);
  }

  async function fetchListings() {
    console.log('Fetching listings for budget:', budget);
    await goto(`?budget=${budget}`, { keepFocus: true, replaceState: true });
  }
</script>

<div class="flex justify-center items-center min-h-screen py-8">
  <div class="cpu-budgeter-card w-[40rem]">
    <header>
      <h2 class="text-2xl font-bold mb-6 text-center">CPU Budgeter</h2>
    </header>
    <section class="p-4">
      <RangeSlider name="budget" bind:value={budget} min={minBudget} max={maxBudget} step={step} ticked>
        <div class="flex justify-between items-center mt-2">
          <div class="font-bold">Budget</div>
          <div class="text-sm font-mono">€{budget.toString().padStart(4, ' ')} / €{maxBudget}</div>
        </div>
      </RangeSlider>
      <button class="mt-4 px-4 py-2 bg-blue-500 text-white rounded" on:click={fetchListings}>
        Update Listings
      </button>
    </section>
    {#if listings.length > 0}
      <section class="mt-4">
        <h3 class="text-xl font-bold mb-2">Available Listings</h3>
        <ul>
          {#each listings as listing}
            <li>
              <a href={listing.url} target="_blank" rel="noopener noreferrer">
                {listing.name} - €{listing.price.toFixed(2)} (Shipping: €{listing.shippingCost.toFixed(2)})
              </a>
            </li>
          {/each}
        </ul>
      </section>
    {:else}
      <p class="mt-4 text-center">No listings found for the selected budget.</p>
    {/if}
  </div>
</div>

<style>
  .cpu-budgeter-card {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    padding: 4rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    min-height: 300px;
  }
</style>