<template>
    <div v-if="currency" class="flex w-full flex-wrap gap-2.5 mt-1.5">
        <div v-if="firm.daily_rate" class="mt-1.5">
            <div
                class="border-[3px] border-blue-200 bg-gray-300 py-[12px] px-[15px] inline-flex flex-col rounded-2xl gap-[5px] min-w-[140px]"
            >
                <span class="text-sm text-white"> Daily rate </span>
                <span class="text-xs text-gray-200">
                    {{ currency(firm.daily_rate) }}
                </span>
            </div>
        </div>
        <div v-if="firm.monthly_rate" class="mt-1.5">
            <div
                class="border-[3px] border-blue-200 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( "Register.monthly_rate")}} </span>
                <span class="text-xs text-gray-200">
                    {{ currency(firm.monthly_rate) }}
                </span>
            </div>
        </div>
        <div v-if="firm.yearly_rate" class="mt-1.5">
            <div
                class="border-[3px] border-blue-200 bg-gray-300 py-[12px] px-[15px] inline-flex flex-col rounded-2xl gap-[5px] min-w-[140px]"
            >
                <span class="text-sm text-white"> Yearly rate </span>
                <span class="text-xs text-gray-200">
                    {{ currency(firm.yearly_rate) }}
                </span>
            </div>
        </div>
    </div>
</template>

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

export default {
    props: {
        firm: {
            type: Object,
            required: true,
        },
    },
    components: {
        Badge,
        MoneyFormat,
    },
    computed: {
        currency() {
            return this.firm.currency;
        },
    },
};
</script>
