<script setup lang="ts">
import { ref } from 'vue'
import { formatNumberToLocaleString } from '@/utils'
import type { NetworkStatus } from '@/interface'

const networkStatus = ref<NetworkStatus>({
    network: 'kaspa-mainnet',
    daaScore: 255953336,
    dagHeader: 1507472,
    dagBlocks: 1507472,
    difficulty: 32931885262483752.0,
    medianOffset: '00:00:04',
    medianTimeUTC: '2025-10-21 03:05:57',
})
</script>

<template>
    <div class="content-card">
        <div class="network-status-container">
            <h2 class="section-title">NETWORK STATUS</h2>

            <div class="status-grid">
                <div class="status-item">
                    <span class="status-label">Network</span>
                    <span class="status-value">{{ networkStatus.network }}</span>
                </div>

                <div class="status-item">
                    <span class="status-label">DAA Score</span>
                    <span class="status-value">{{
                        formatNumberToLocaleString(networkStatus.daaScore)
                    }}</span>
                </div>

                <div class="status-item">
                    <span class="status-label">DAG Header</span>
                    <span class="status-value">{{
                        formatNumberToLocaleString(networkStatus.dagHeader)
                    }}</span>
                </div>

                <div class="status-item">
                    <span class="status-label">DAG Blocks</span>
                    <span class="status-value">{{
                        formatNumberToLocaleString(networkStatus.dagBlocks)
                    }}</span>
                </div>

                <div class="status-item">
                    <span class="status-label">Difficulty</span>
                    <span class="status-value">{{
                        formatNumberToLocaleString(networkStatus.difficulty)
                    }}</span>
                </div>

                <div class="status-item">
                    <span class="status-label">Median Offset</span>
                    <span class="status-value">{{ networkStatus.medianOffset }}</span>
                </div>

                <div class="status-item">
                    <span class="status-label">Median Time UTC</span>
                    <span class="status-value">{{ networkStatus.medianTimeUTC }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.content-card {
    @include card-base;
}

.network-status-container {
    .section-title {
        font-size: var(--font-xl);
        font-weight: var(--font-bold);
        color: var(--text-primary);
        margin-bottom: var(--spacing-2xl);
        letter-spacing: var(--tracking-wider);
        text-align: center;
        padding-bottom: var(--spacing-lg);
        border-bottom: 3px solid var(--primary-color);
    }

    .status-grid {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xl);
    }

    .status-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--spacing-lg) var(--spacing-xl);
        background: var(--bg-light);
        border-radius: var(--radius-md);
        transition: var(--transition-all);

        &:hover {
            background: var(--bg-hover);
            transform: translateX(5px);
        }

        .status-label {
            font-weight: var(--font-semibold);
            color: var(--text-secondary);
            font-size: var(--font-md);
        }

        .status-value {
            font-weight: var(--font-semibold);
            color: var(--text-primary);
            font-size: var(--font-lg);
            text-align: right;
            font-family: var(--font-mono);
        }
    }
}
</style>
