<template>
  <fieldset>
    <div>
      <div
        v-for="item in props.items"
        :key="item.id"
        class="mb-4 flex items-center last:mb-0"
      >
        <input
          :id="String(item.id)"
          name="coursesessions"
          type="radio"
          :value="item.id"
          :checked="selected === item.id"
          class="focus:ring-indigo-900 h-4 w-4 border-gray-300 text-blue-900"
          @change="emit('select', item)"
        />
        <label
          :for="String(item.id)"
          class="ml-3 block text-sm font-medium leading-6 text-gray-900"
        >
          {{ item.title }}
        </label>
      </div>
    </div>
  </fieldset>
</template>

<script setup lang="ts">
import type { CourseSession } from "@/types";

export interface Item {
  id: string;
  title: string;
}

export interface Props {
  items: CourseSession[];
  selected?: number;
}

const props = defineProps<Props>();
const emit = defineEmits(["select"]);
</script>
