<template>
  <div class="fixed inset-0 bg-color  flex items-center justify-center z-50">
    <div class="bg-white text-black p-6 rounded-lg w-full max-w-md">
      <h2 class="text-2xl font-bold mb-4">Options</h2>

      <div class="space-y-3">
        <label class="block">
          <span class="text-gray-700">Data Source:</span>
          <select v-model="dataSource" class="mt-1 block w-full">
            <option value="local">Local (Mock)</option>
            <option value="remote">Remote (API)</option>
          </select>
        </label>

        <label class="block">
          <span class="text-gray-700">Volume:</span>
          <input type="range" min="0" max="100" v-model="volume" class="w-full" />
        </label>
      </div>

      <div class="mt-6 flex justify-end gap-2">
        <button @click="$emit('close')" class="px-4 py-2 bg-gray-600 text-white rounded">Close</button>
        <button @click="save" class="px-4 py-2 bg-blue-600 text-white rounded">Save</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const emit = defineEmits(['close']);

const dataSource = ref(localStorage.getItem('dataSource') || 'local');
const volume = ref(+localStorage.getItem('volume') || 50);

function save() {
  localStorage.setItem('dataSource', dataSource.value);
  localStorage.setItem('volume', volume.value.toString());
  emit('close');
}
</script>

<style scoped>
.bg-color {
  background-color: rgba(0, 0, 0, 0.75);
}
</style>
