<template>
  <div class="image-grid">
    <div :key="index" v-for="(i, index) in data" class="image" @click="emits('clickImage', index)">
      <div class="item" :style="{ backgroundImage: `url(${i})` }"></div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { onMounted } from 'vue';

  const emits = defineEmits(['clickImage']);
  // interface ImageProps {
  //   url: string;
  //   id?: string;
  // }
  defineProps({
    data: {
      type: Array as PropType<string[]>,
      default: () => [],
    },
  });

  onMounted(() => {});
</script>

<style lang="scss" scoped>
  .image-grid {
    width: 95%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0 auto;
    .image {
      flex: 0 0 25%;
      height: 145px;
      max-width: 145px;
      padding: 8px;
      .item {
        width: 100%;
        height: 100%;
        border-radius: 5px;
        background-repeat: no-repeat;
        background-size: cover;
      }
    }
  }
</style>
<style lang="scss">
  [is-mobile] .image-grid {
    width: 100;
    .image {
      flex: 0 0 33.33333%;
      height: 120px;
      width: 100%;
      padding: 5px;
    }
  }
</style>
