<!-- TODO: not wcag compatible -->
<template>
  <div :class="getModifiersClass('c-selection-list', modifiers)">
    <div class="c-selection-list__item" v-for="(item, index) in items" :key="index">
      <label :title="item.title" class="o-checkbox">
        <input type="radio" checked name="radio" @change="item.onChange" />
        {{ item.text }}
      </label>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { ModifierItems } from './selection-list.config';
import type SelectionListItem from '../../models/SelectionListItem';
import useComponentModifiers from '../../composable/useComponentModifiers';

defineProps<{
  items: SelectionListItem[];
  modifiers?: ModifierItems;
}>();

const { getModifiersClass } = useComponentModifiers();
</script>
