<script setup lang="ts">
import { ArrowBigRightDashIcon, DicesIcon } from "@lucide/vue";
import { generateSlug } from "random-word-slugs";
import { ref } from "vue";

const listNameInput = ref<string>(generateSlug(4));

function onRandom() {
    listNameInput.value = generateSlug(4);
}
</script>

<template>
    <div class="p-4">
        <div class="mb-4 italic text-xl font-extralight" v-html="$t('home')">
        </div>
        <div class="flex gap-2 mb-4">
            <input
                v-model="listNameInput"
                type="text"
                :placeholder="$t('new_task_hint')"
                class="input grow"
            />
            <button
                class="btn btn-square"
                @click="onRandom"
            >
                <dices-icon />
            </button>
        </div>
        <div class="w-full px-4">
            <router-link class="btn btn-lg" :to="`/${listNameInput}`">
                <arrow-big-right-dash-icon class="inline" /> {{ $t('home_button') }}
            </router-link>
        </div>
    </div>
</template>
