<template>
  <div class="button-playground">
    <div class="row">
      <div class="col">
        <v-button>Primary</v-button>
      </div>
      <div class="col">
        <v-button color="success">Success</v-button>
      </div>
      <div class="col">
        <v-button color="danger" small>Small Danger</v-button>
      </div>
      <div class="col">
        <v-button color="info" large label="Large Info" />
      </div>
    </div>
    <div class="row">
      <div class="col">
        <v-split-button
          :options="actions"
          label="Split Button"
          @click="onSplitButtonClicked()"
          @option-selected="onOptionSelected($event)"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { SelectOption } from '@/types/custom-types';
import { VButton, VSplitButton } from '../components';

const getSelectOption = (text: string, separator?: boolean) => {
  const val = text.toLowerCase().trim().replace(/\s/g, '-');
  return { key: val, text, value: val, separator };
};

const actions: SelectOption[] = [
  getSelectOption('Action 1'),
  getSelectOption('Action 2'),
  getSelectOption('Action 3'),
  getSelectOption('separtor-1', true),
  getSelectOption('Action 4'),
  getSelectOption('Action 5'),
];

const onSplitButtonClicked = () => {
  alert('Split Button clicked!!!');
};
const onOptionSelected = (option: SelectOption) => {
  alert('Split Button option selected: ' + option.value);
};
</script>
