<template>
  <!-- TODO: dynamiser la valeur de l'attribut style: url('inspiration.cover') -->
  <div
    id="inspiration-select"
    class="flex"
    style="
      --image: url('https://plus.unsplash.com/premium_photo-1675626791716-7f74187592f1?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
    "
  >
    <label for="inspirations">Choisir une inspiration</label>
    <Select
      id="inspirations"
      v-model="selectedInspiration"
      :options="inspirations"
      optionLabel="name"
      optionValue="value"
      class=""
    />
  </div>
</template>

<script setup>
import { ref } from "vue";

const selectedInspiration = ref("shape-of-nature");
const inspirations = ref([
  { name: "Shape of Nature", value: "shape-of-nature" },
  { name: "Inspiration Title", value: "inspiration-title" },
]);
</script>

<style scoped>
#inspiration-select {
  --direction: column;
  --items: flex-start;
  --wrap: no-wrap;
  --row-gap: 0;
  position: relative;
  float: right;
  background: var(--color-background);
  border-radius: var(--rounded-full);
  height: 3.75rem;
  padding: var(--space-8) var(--space-48) var(--space-8) var(--space-64);
  margin-bottom: var(--space-16);
}
#inspiration-select::before {
  content: "";
  position: absolute;
  left: var(--space-8);
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--rounded-full);
  background-image: var(--image);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
</style>
