<script setup>
import { ref, onMounted } from 'vue';
import router from '@/router/index.js'

const searchQuery = ref('');

async function searchMovies() {
    router.push({ path: '/search', query: { q: searchQuery.value } });

}

</script>

<template>
    <form @submit.prevent="searchMovies">
        <input v-model="searchQuery" type="text" placeholder="Exemple : Cars">
        <button>Rechercher</button>
    </form>
</template>

<style scoped>
input {
    display: block;
    padding: 10px;
    font-size: 20px;
    border: none;
    outline: none;
    background-color: var(--color-background);
    color: var(--color-text);
    flex-grow: 2;
    border-radius: 5px;
}


form {
    margin: 10px auto;
    width: 45%;
    display: flex;
    flex-direction: row;
    border: 1px solid #e6007e;
    border-radius: 5px;
}


input:focus {
    outline: none;
}

form:focus-within {
    outline: none;
}

button {
    border: 1px solid #e6007e;
    background: #e6007e;
    /* color: var(--color-text); */
    border-radius: 0 4px 4px 0;
}
</style>