<script lang="ts">
  import themes from "daisyui/src/theming/themes"
  import {identity} from '@welshman/lib'
  import {createSearch} from '@lib/util'
  import Icon from "@lib/components/Icon.svelte"
  import {theme} from '@app/theme'

  let term = ""

  const searchThemes = createSearch(Object.keys(themes), {getValue: identity})
</script>

<div class="content column gap-4">
  <h1 class="superheading mt-20">Discover Themes</h1>
  <p class="text-center">Make Flotilla look just how you like it</p>
  <label class="input input-bordered w-full flex items-center gap-2">
    <Icon icon="magnifer" />
    <input bind:value={term} class="grow" type="text" placeholder="Search for themes..." />
  </label>
  <div class="grid grid-cols-2 md:grid-cols-2 gap-4">
    {#each searchThemes.searchValues(term) as name}
      <div class="card bg-base-100 shadow-xl" data-theme={name}>
        <div class="card-body">
          <h2 class="card-title justify-center capitalize card2">{name}</h2>
          <div class="card-actions">
            <button class="btn btn-primary w-full" on:click={() => theme.set(name)}>Use Theme</button>
          </div>
        </div>
      </div>
    {/each}
  </div>
</div>
