<script setup>
import Layout from "@/Layouts/PromoSidebar";
import AccountTypesRadioGroup from "@/components/AccountTypesRadioGroup.vue";
import JetButton from "@/Jetstream/Button";
import { ref } from "@vue/reactivity";

const selected = ref(null);
const accountTypes = ["client", "engineer", "firm"];
const accountTypeChanged = (value) => {
    selected.value = value;
};

const invalidAccountType = (selected) => {
    return !accountTypes.includes(selected);
};
</script>

<template>
    <Layout register title="Register">
        <div
            class="container flex flex-col items-center justify-center flex-1 py-5"
        >
            <form
                action="/register"
                class="w-full sm:max-w-[545px]"
                method="GET"
            >
                <ul class="px-8 mb-10 list-none">
                    <li
                        class="before:content-['👋🏻'] font-semibold text-2xl md:text-4xl text-gray-300 relative before:absolute before:top-1/2 before:-translate-y-1/2 before:right-full before:mx-1"
                    >
                        {{ $t("Register.create_acount") }}
                    </li>
                    <li class="text-sm font-medium text-gray-200 md:text-lg">
                        {{ $t("Register.choice") }}
                    </li>
                </ul>
                <AccountTypesRadioGroup @changed="accountTypeChanged" />
                <div class="flex justify-end mt-5">
                    <JetButton
                        :disabled="invalidAccountType(selected)"
                        :href="`/register?type=${selected}`"
                        size="lg"
                        >{{ $t("Register.Let_start") }}
                    </JetButton>
                </div>
            </form>
        </div>
    </Layout>
</template>
