<template>
  <div class="pill-radio">
    <button
      :class="['pill-radio__button', { 'pill-radio__button--active': item === selectedItem }]"
      :data-cy="'radio-button-' + item"
      v-for="item in props.items"
      :key="item"
      @click="updateSelectedItem(item)"
    >
      {{ item }}
    </button>
  </div>
</template>

<script setup lang="ts">
const emit = defineEmits(['update:selectedItem']);

const props = defineProps<{
  items: string[];
  selectedItem: string;
}>();

function updateSelectedItem(item: string) {
  emit('update:selectedItem', item);
}
</script>

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

.pill-radio {
  display: flex;
  overflow: hidden;

  &__button {
    flex-grow: 1;
    cursor: pointer;
    background-color: $color-silver-light;
    text-transform: uppercase;

    outline: none;
    padding: $small-spacing $medium-spacing;
    border: none;
    @include small-text;

    &--active {
      background-color: white;
      border: solid $color-silver 1px;
    }
  }

  &__button:first-child {
    border-top-left-radius: $round-border-radius;
    border-bottom-left-radius: $round-border-radius;
  }

  &__button:last-child {
    border-top-right-radius: $round-border-radius;
    border-bottom-right-radius: $round-border-radius;
  }
}
</style>
