<template>
    <div
        class="flex items-center justify-between w-full gap-2 p-4 bg-white rounded-lg shadow-lg top-full"
    >
        <div class="flex items-center justify-start flex-1 gap-1">
            <span class="text-gray-200">{{ $t("Register.start_earning") }}</span>
            <vue-writer
                :array="types"
                :typeSpeed="50"
                :eraseSpeed="25"
                :caret="'cursor'"
            />
        </div>
        <div>
            <Button size="landing" :href="route('projects.index')">
                <span class="hidden md:block">{{$t('footer.browse_jobs')}}</span>
                <svg
                    class="block rtl:rotate-180 md:hidden"
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                >
                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                    <line x1="5" y1="12" x2="19" y2="12" />
                    <line x1="15" y1="16" x2="19" y2="12" />
                    <line x1="15" y1="8" x2="19" y2="12" />
                </svg>
            </Button>
        </div>
    </div>
</template>

<script>
import {
    Listbox,
    ListboxButton,
    ListboxOption,
    ListboxOptions,
} from "@headlessui/vue";

import VueWriter from "vue-writer";
import Button from "@/Jetstream/Button.vue";
export default {
    data() {
        return {
            types: [
                "3D Artist",
                "Aerospace Engineer",
                "Agricultural Engineer",
                "Agricultural Scientist",
                "Software Engineer",
            ],
        };
    },
    components: {
        Listbox,
        ListboxButton,
        ListboxOption,
        ListboxOptions,
        VueWriter,
        Button,
    },
};
</script>

<style>
.is-typed span.cursor {
    display: inline-block;
    width: 1px;
    background-color: #f1416c;
    animation: blink 1s infinite;
    margin: 0 1px;
}
.is-typed span.underscore {
    display: inline-flex;
    width: 10px;
    height: 1px;
    align-items: flex-end;
    background-color: #f1416c;
    animation: blink 1s infinite;
}
.is-typed span.cursor.typing {
    animation: none;
}
@keyframes blink {
    49% {
        background-color: #f1416c;
    }
    50% {
        background-color: transparent;
    }
    99% {
        background-color: transparent;
    }
}
</style>
