<template>
    <a-modal
        :open="visible"
        :title="$t('website_language.website_language_details')"
        :footer="null"
        :width="480"
        @cancel="onClose"
        centered
    >
        <div class="lang-view-content">
            <!-- Flag Section -->
            <div class="lang-flag-section">
                <div class="flag-emoji-large">{{ getFlagEmoji(data.flag_code) }}</div>
            </div>

            <!-- Info Section -->
            <div class="lang-info-section">
                <a-descriptions :column="1" bordered size="small">
                    <a-descriptions-item :label="$t('website_language.name')">
                        <span class="lang-name">{{ data.name }}</span>
                    </a-descriptions-item>
                    <a-descriptions-item :label="$t('website_language.key')">
                        <a-tag color="blue">{{ data.key }}</a-tag>
                    </a-descriptions-item>
                    <a-descriptions-item :label="$t('website_language.is_rtl')">
                        <a-tag :color="data.is_rtl ? 'blue' : 'default'">
                            {{ data.is_rtl ? $t('website_language.rtl') : $t('website_language.ltr') }}
                        </a-tag>
                    </a-descriptions-item>
                    <a-descriptions-item :label="$t('website_language.enabled')">
                        <a-tag :color="data.enabled ? 'success' : 'default'">
                            {{ data.enabled ? $t('common.enabled') : $t('common.disabled') }}
                        </a-tag>
                    </a-descriptions-item>
                </a-descriptions>
            </div>
        </div>
    </a-modal>
</template>

<script>
import { defineComponent } from "vue";
import common from "@/common/composable/common";
import { getFlagEmoji } from "../../../common/scripts/countryCodes";

export default defineComponent({
    props: ["data", "visible"],
    emits: ["closed"],
    setup(props, { emit }) {
        const { formatDateTime, formatAmountCurrency } = common();

        const onClose = () => {
            emit("closed");
        };

        return {
            formatDateTime,
            formatAmountCurrency,
            onClose,
            getFlagEmoji,
        };
    },
});
</script>

<style scoped>
.lang-view-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.lang-flag-section {
    display: flex;
    justify-content: center;
}

.flag-emoji-large {
    font-size: 96px;
    line-height: 1;
}

.lang-info-section {
    width: 100%;
}

.lang-name {
    font-weight: 600;
    font-size: 16px;
    color: #262626;
}

/* Dark mode support */
:global(.dark_theme) .lang-name {
    color: rgba(255, 255, 255, 0.85);
}
</style>
