<template>
  <div class="row p-2">
    <div
      v-for="(item, index) in items"
      :key="index"
      class="col-md-3"
    >
      <div class="my-check v2">
        <label
          @click="emitEvent(item)"
          :for="item.name"
          ><img
            style="width: 100%"
            :src="'https://cdn.magico.pl/pagebuilder/images/' + item.name + '.jpg'"
            :alt="item.label"
        /></label>
      </div>
    </div>
  </div>
</template>
<script>
import { ref } from "vue";
import grid from "./grid.js";

export default {
  emits: ["choose"],
  setup(props, { emit }) {
    const items = ref(grid);

    function emitEvent(item) {
      emit("choose", item);
    }
    return { items, emitEvent };
  },
};
</script>
<style>
.my-check input {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.my-check label {
  cursor: pointer;
}
</style>
