<template>
    <div
        v-if="phone"
        class="flex flex-1 w-full items-center justify-start gap-[5px]"
    >
        <FormKit
            id="phone"
            v-model="phone[name]"
            :classes="{
                outer: 'mb-0 ',
            }"
            :label="label"
            :placeholder="placeholder"
            :validation="validation"
            name="tel"
            required
            type="tel"
        >
            <template #prefix>
                <Country v-model:code="phone.code" showCode />
            </template>
        </FormKit>
    </div>
</template>

<script>
import Country from "@/components/Inputs/CountrySelect";

export default {
    props: {
        phone: {
            type: Object,
            default: null,
        },
        countryCode: {
            type: String,
            default: null,
        },
        label: {
            type: String,
            default: "Mobile phone",
        },
        placeholder: {
            type: String,
            default: "Enter your mobile phone here",
        },
        validation: {
            type: String,
            default: "required|length:8,16",
        },
        name: {
            type: String,
            default: "number",
        },
    },
    components: {
        Country,
    },
    watch: {
        phone: {
            handler(val) {
                this.$emit("update:phone", val);
            },
            deep: true,
        },
    },
    beforeCreate() {
        if (this.phone.phone) this.phone.number = this.phone.phone;
    },
};
</script>
