<template>
    <Card :title="$t('Register.service_type')">
        <TabGroup>
            <div class="w-full">
                <TabList class="flex justify-between w-full gap-1 px-1">
                    <Tab
                        class="focus:outline-none focus:border-none flex flex-col gap-1.5 mx-auto"
                        as="button"
                        v-slot="{ selected }"
                    >
                        <span
                            :class="[
                                'flex flex-col items-center justify-center gap-0.5 font-medium capitalize',
                                selected ? 'text-blue-300' : 'text-gray-200',
                            ]"
                        >
                            <span
                                class="flex items-center justify-center w-[18px] h-[18px] m-1 border-2 rounded-full"
                                :class="
                                    selected
                                        ? 'border-blue-300'
                                        : 'border-gray-200'
                                "
                            >
                                <span
                                    class="w-2 h-2 bg-blue-300 rounded-full"
                                    :class="selected ? 'block' : 'hidden'"
                                ></span>
                            </span>
                            <span class="flex flex-col">
                                <span>
                                    {{
                                        $t(`Register.${tier.packageType}`)
                                    }}</span
                                >
                                <span class="text-xs text-gray-200">
                                    {{ currency(tier.tier_price) }}
                                </span>
                            </span>
                        </span>
                    </Tab>
                </TabList>
            </div>

            <hr class="my-5 bg-gray-200" />
            <TabPanels>
                <TabPanel as="div">
                    <TierPanel
                        :serviceType="tier.tierIdx"
                        :serviceId="tier.serviceId"
                        :price="tier.tier_price"
                        :deliveryDays="tier.delivery_days"
                        :options="tier.tier_options"
                        :packageType="tier.packageType"
                        :isUser="isUser"
                        :paid="paid"
                        :refunded="refunded"
                    />
                </TabPanel>
            </TabPanels>
        </TabGroup>
    </Card>
</template>

<script>
import { TabGroup, TabList, Tab, TabPanels, TabPanel } from "@headlessui/vue";
import TierPanel from "@/components/Services/TierPanel";
import Card from "@/components/Containers/ContentCard";
export default {
    components: {
        TabGroup,
        TabList,
        Tab,
        TabPanels,
        TabPanel,
        TierPanel,
        Card,
    },
    props: {
        tier: Object,
        isUser: Boolean,
        paid: Boolean,
        refunded: Boolean,
    },
};
</script>

<style></style>
