<template>
  <div :style="wrapperStyle">
    <v-sheet class="mx-auto dock-center" max-width="700">
      <v-slide-group multiple show-arrows>
        <v-slide-item v-for="(i, k) in items" :key="k">
          <v-btn class="mx-2 dock-padding" small fab dark :color="i.color">
            <v-icon dark>{{i.icon}}</v-icon>
          </v-btn>
        </v-slide-item>
        <!-- <v-slide-item v-for="(i, k) in items" :key="k" v-slot:default="{ active, toggle }">
          <v-btn class="mx-2" fab dark :color="i.color" :input-value="active" @click="toggle">
            <v-icon dark>{{i.icon}}</v-icon>
          </v-btn>
        </v-slide-item>-->
      </v-slide-group>
    </v-sheet>
  </div>
</template>
<script>
export default {
  props: {
    // mapbox drawer options
    wrapperStyle: {
      type: Object,
      default: () => {}
    },
    items: {
      type: Array,
      default: () => []
    }
  },
  data: () => ({
    model: null
  })
};
</script>

<style lang="scss">
.dock-center {
  display: inline-block;
}
.dock-padding {
  margin: 0px 4px;
}
</style>