import './Radio.sass'
import { RadioGroup } from '@kobalte/core/radio-group'
import { For, Show } from 'solid-js/web'
import type { Setter } from 'solid-js'

interface Props {
  label?: string
  data: string[]
  value: string
  onChange: Setter<string>
  gap?: number
}
export default (props: Props) => {
  return (
    <>
      <RadioGroup class="radio-group" value={props.value} onChange={props.onChange}>
        <Show when={props.label}>
          <RadioGroup.Label class="radio-group__label">{props.label}</RadioGroup.Label>
        </Show>

        <div class="radio-group__items" role="presentation" style={`gap: ${props.gap || 1}rem`}>
          <For each={props.data}>
            {(item: any) => (
              <RadioGroup.Item value={item} class="radio">
                <RadioGroup.ItemInput class="radio__input" />
                <RadioGroup.ItemControl class="radio__control">
                  <RadioGroup.ItemIndicator class="radio__indicator" />
                </RadioGroup.ItemControl>
                <RadioGroup.ItemLabel class="radio__label">{item}</RadioGroup.ItemLabel>
              </RadioGroup.Item>
            )}
          </For>
        </div>
      </RadioGroup>
    </>
  )
}
