<template>
  <div class="dropdown-playground row">
    <div class="col col-12">
      <v-drop-down label="Favorite Movie" :options="dropdownItems" v-model="selectedItem" />
    </div>
    <div class="col col-12 mt-2">
      <v-drop-down label="Required" :options="dropdownItems" v-model="selectedItem" required />
    </div>
    <div class="col col-12 mt-2">
      <v-drop-down label="Floating Label" :options="dropdownItems" v-model="selectedItem" floating-label />
    </div>
    <div class="col col-12 mt-2 ms-1">Selected: {{ selectedItem }}</div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { SelectOption } from '@/types/custom-types';
import { VDropDown } from '../components';

const getDropDownItem = (text: string, val: string): SelectOption => {
  return { text, value: val, key: val };
};

const dropdownItems = [
  getDropDownItem('Back to the Future', 'bttf'),
  getDropDownItem('Raders of the Lost Ark', 'rotla'),
  getDropDownItem('Lord of the Rings', 'lotr'),
  getDropDownItem(`Harry Potter and the Sorceror's Stone`, 'hp1'),
  getDropDownItem('Ghost Busters', 'gb1'),
];
const selectedItem = ref('');
</script>
