import { For } from 'solid-js'
import { cn } from '@/utils/cn'

export interface TabOption {
  value: string
  label: string
}

interface TabsProps {
  label: string
  options: TabOption[]
  value: string
  onChange: (value: string) => void
  class?: string
}

export const Tabs = (props: TabsProps) => (
  <div class={cn('inline-flex rounded-xl bg-surface-low p-1', props.class)} role="tablist">
    <For each={props.options}>
      {(option) => (
        <button
          type="button"
          role="tab"
          aria-selected={props.value === option.value}
          class={cn(
            'rounded-lg px-4 py-2 text-xs font-semibold transition-all duration-200',
            props.value === option.value
              ? 'bg-surface-container text-fg'
              : 'text-muted-fg hover:text-fg',
          )}
          onClick={() => props.onChange(option.value)}
        >
          {option.label}
        </button>
      )}
    </For>
  </div>
)
