<script lang="ts">
  import { cn } from "$lib/utils.js";

  interface Option {
    value: string;
    label: string;
  }

  let {
    options,
    value,
    onchange,
    scrollable = false,
    class: className = "",
  }: {
    options: Option[];
    value: string;
    onchange: (value: string) => void;
    scrollable?: boolean;
    class?: string;
  } = $props();
</script>

<div
  class={cn(
    "flex gap-2",
    scrollable ? "flex-nowrap overflow-x-auto pb-0.5 scrollbar-none" : "flex-wrap",
    className,
  )}
>
  {#each options as option (option.value)}
    <button
      type="button"
      onclick={() => onchange(option.value)}
      class={cn(
        "whitespace-nowrap rounded-full px-4 py-1.5 text-sm font-medium transition-all duration-200 cursor-pointer shrink-0",
        value === option.value
          ? "bg-gradient-to-r from-primary to-accent text-white shadow-sm shadow-primary/30"
          : "border border-primary/20 text-muted-foreground bg-background/50 hover:border-primary/50 hover:text-foreground hover:bg-background/80",
      )}
    >
      {option.label}
    </button>
  {/each}
</div>
