<template>
  <div class="col-4 mb-3 d-flex radio-card">
    <input
      type="radio"
      class="position-absolute opacity-0"
      :class="className"
      :id="radioID"
      :name="groupName"
      :value="radioLabel"
      v-model="picked"
      :tabindex="tabIndex"
    />
    <label
      v-bind:for="radioID"
      class="rounded-3 d-flex flex-column align-items-center w-100"
    >
      <img
        class="px-3 pt-3 pb-2 mt-auto"
        v-bind:src="require(`@/assets/img/icons/${radioImage}`)"
        v-bind:alt="altText"
      />
      <span class="mt-auto mb-2 text-center lh-1">{{ radioLabel }}</span>
    </label>
  </div>
</template>

<!-- tabIndex="x" is available on this component if needed -->

<script>
export default {
  name: "radioCard",
  props: [
    "groupName",
    "radioLabel",
    "radioImage",
    "altText",
    "radioID",
    "tabIndex",
    "className",
  ],
  data() {
    return {
      picked: "picked",
    };
  },
};
</script>
