<script setup>
import { ref } from 'vue'
import { createBookmark } from '../api.js'

const emit = defineEmits(['created'])
const title = ref('')
const link = ref('')

async function submit() {
  if (!title.value.trim() || !link.value.trim()) return
  const bookmark = await createBookmark({
    title: title.value.trim(),
    link: link.value.trim(),
  })
  emit('created', bookmark)
  title.value = ''
  link.value = ''
}
</script>

<template>
  <form class="bookmark-form" @submit.prevent="submit">
    <input v-model="title" placeholder="title" required />
    <input v-model="link" placeholder="https://..." required />
    <button type="submit" class="btn-add">+</button>
  </form>
</template>
