<template>
  <div :class="['chooser-element', subclass]" :data-cy="cy" @click="$emit('select')">
    <component class="chooser-element__icon" :is="icon" />
    <div class="chooser-element__title">
      {{ title }}
    </div>
  </div>
</template>

<script>
import formElementIcons from '@/components/ui/form-element-icons';

export default {
  props: {
    type: {
      type: String,
      default: '',
    },
    icon: {
      type: String,
      default() {
        return `${this.type}-icon`;
      },
    },
    title: {
      type: String,
      default() {
        return this.type.replace(/^\w/, (c) => c.toUpperCase());
      },
    },
  },

  components: {
    ...formElementIcons,
  },

  data() {
    return {
      subclass: `chooser-element--${this.type}`,
      cy: `choose-${this.type}-widget`,
    };
  },
};
</script>

<style scoped lang="scss">
@import '~styles/helpers';

.chooser-element {
  cursor: pointer;
  border: 1px solid $color-silver;
  border-radius: 4px;
  height: 105px;
  width: 105px;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: 1fr 45px;
  justify-content: center;
  justify-items: center;
  align-items: center;

  &__icon {
    width: 40px;
    height: 40px;
    align-self: end;
  }
}
</style>
