<script lang="ts">
  // Imports
  import type { SomeType } from '../types/some.contracts'

  // Props (typed with $props rune)
  interface Props {
    // type all props
    items: SomeType[]
    isLoading?: boolean
    onselect?: (item: SomeType) => void
  }

  let { items, isLoading = false, onselect }: Props = $props()

  // Local state ($state rune)
  let selectedId = $state<string | null>(null)

  // Derived state ($derived rune)
  let isEmpty = $derived(!isLoading && items.length === 0)

  // Handlers
  function handleSelect(item: SomeType) {
    selectedId = item.id
    onselect?.(item)
  }
</script>

<!-- Template with loading/error/empty states -->
{#if isLoading}
  <div>Loading...</div>
{:else if isEmpty}
  <div>No items found</div>
{:else}
  {#each items as item (item.id)}
    <div onclick={() => handleSelect(item)}>{item.name}</div>
  {/each}
{/if}

<style>
  /* scoped styles */
</style>