<template>
    <div
        v-if="currency"
        class="flex w-full flex-col md:flex-row flex-wrap gap-2.5 mt-1.5"
    >
        <div
            v-if="engineer.daily_rate"
            class="mt-1.5 flex-1 md:flex-initial flex md:inline-block"
        >
            <div
                class="border-[3px] border-blue-200 flex-1 bg-gray-300 py-[12px] px-[15px] inline-flex flex-col rounded-2xl gap-[5px] min-w-[140px]"
            >
                <span class="text-sm text-white">
                    {{ $t("profile.daily_rate") }}
                </span>
                <span class="text-xs text-gray-200">
                    {{ currency(engineer.daily_rate) }}
                </span>
            </div>
        </div>
        <div
            v-if="engineer.monthly_rate"
            class="mt-1.5 flex-1 md:flex-initial flex md:inline-block"
        >
            <div
                class="border-[3px] border-blue-200 flex-1 bg-gray-300 py-[12px] px-[15px] inline-flex flex-col rounded-2xl gap-[5px] min-w-[140px]"
            >
                <span class="text-sm text-white">
                    {{ $t("profile.monthly_rate") }}
                </span>
                <span class="text-xs text-gray-200">
                    {{ currency(engineer.monthly_rate) }}
                </span>
            </div>
        </div>
        <div
            v-if="engineer.yearly_rate"
            class="mt-1.5 flex-1 md:flex-initial flex md:inline-block"
        >
            <div
                class="border-[3px] border-blue-200 flex-1 bg-gray-300 py-[12px] px-[15px] inline-flex flex-col rounded-2xl gap-[5px] min-w-[140px]"
            >
                <span class="text-sm text-white">
                    {{ $t("profile.yearly_rate") }}
                </span>
                <span class="text-xs text-gray-200">
                    {{ currency(engineer.yearly_rate) }}
                </span>
            </div>
        </div>
    </div>
</template>

<script>
import Badge from "@/components/General/Badge";
import MoneyFormat from "vue-money-format";

export default {
    props: {
        engineer: {
            type: Object,
            required: true,
        },
    },
    components: {
        Badge,
        MoneyFormat,
    },
};
</script>
