<script lang="ts">
  import type { Snippet } from 'svelte'

  const {
    onclick,
    children: content,
    selected = $bindable(),
  }: {
    onclick?: () => void
    children?: Snippet
    selected?: boolean
  } = $props()
</script>

<button
  onclick={() => onclick?.()}
  class:selected
  class="cursor-pointer px-6 py-3 border-2 rounded-lg transition-all border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500 dark:text-gray-300"
>
  {@render content?.()}
</button>

<style>
  @reference "../../../../app.css";

  .selected {
    @apply border-blue-600 bg-blue-50 dark:border-blue-500  dark:text-white dark:bg-blue-950;
  }
</style>
