<template>
  <div class="color-chooser">
    <div
      :key="index"
      :class="{'color-chooser__color-wrapper--selected': selectedColor === color.name}"
      class="color-chooser__color-wrapper"
      data-cy="color-select"
      v-for="(color, index) in colors"
      @click="$emit('input', color.name)">
      <div
        :class="'color-chooser__color--' + color.name"
        class="color-chooser__color">
        <tick
          class="color-chooser__selected-icon"
          v-if="selectedColor === color.name"/>
      </div>
    </div>
  </div>
</template>

<script>
  import Tick from '@/components/icons/Tick';

  export default {
    props: ['selected-color'],

    components: {
      Tick
    },

    data() {
      return {
        colors: [
          {
            name: 'yellow'
          },
          {
            name: 'blue'
          },
          {
            name: 'red'
          },
          {
            name: 'green'
          }
        ]
      };
    },
  };
</script>

<style scoped lang="scss">
  @import "@/styles/_variables.scss";
  @import "@/styles/_mixins.scss";

  .color-chooser {
    display: flex;

    &__color-wrapper {
      margin-right: 10px;
      border-radius: 50px;
      padding: 10px;

      &--selected {
        border: 1px solid $color-charcoal-dark;
      }
    }

    &__selected-icon {
      width: 17px;
      fill: $color-charcoal-dark;
    }

    &__color {
      width: 46px;
      height: 46px;
      border-radius: 23px;
      display: flex;
      justify-content: center;
      @supports (display: grid) {
        display: grid
      }
      justify-items: center;
      align-items: center;

      @include skillbox-colors;
    }
  }
</style>
