<template>
  <Modal :is-open="isOpen" @close="cancel" title="GIF Settings">
    <div class="p-4">
      <div class="mb-6">
        <label for="fps" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Frames Per Second (FPS)</label>
        <div class="flex items-center">
          <input id="fps" v-model.number="fpsValue" type="number" min="1" max="60" class="block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm text-base" data-rybbit-event="gif-fps-input" />
        </div>
        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Higher FPS will result in smoother animation but larger file size.</p>
      </div>

      <div class="flex flex-col-reverse sm:flex-row sm:justify-end space-y-3 space-y-reverse sm:space-y-0 sm:space-x-3">
        <button @click="cancel" class="px-4 py-2 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-200 font-medium rounded-lg transition-colors" data-rybbit-event="gif-cancel">Cancel</button>
        <button @click="confirm" class="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white font-medium rounded-lg transition-colors" data-rybbit-event="gif-generate">Generate GIF</button>
      </div>
    </div>
  </Modal>
</template>

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

  const props = defineProps<{
    isOpen: boolean;
    defaultFps?: number;
  }>();

  const emit = defineEmits<{
    (e: 'close'): void;
    (e: 'confirm', fps: number): void;
  }>();

  const fpsValue = ref(props.defaultFps || 10);

  const confirm = () => {
    emit('confirm', fpsValue.value);
  };

  const cancel = () => {
    emit('close');
  };
</script>
