---
import MainGridLayout from "@layouts/MainGridLayout.astro";
import { Icon } from "astro-icon/components";
import type { Friend } from "@/types/data";
import { siteConfig } from "@/config";

const friends = Object.values(import.meta.glob<Friend>("@/data/friends/*.json", { eager: true, import: "default" }));
---

<MainGridLayout title="友链">
    <div class="card-base p-6 md:p-8">
        <div class="flex items-center gap-2 mb-6">
            <div class="h-8 w-8 rounded-lg bg-[var(--primary)] flex items-center justify-center text-white dark:text-black/70">
                <Icon name="material-symbols:diversity-3" class="text-[1.5rem]">
            </div>
            <h1 class="text-2xl font-bold text-black dark:text-white">友链</h1>
        </div>

        <!-- 申请友链 -->
            <p class="text-sm text-black/60 dark:text-white/60 mb-4">
            如果您也想加入友链名单，<a target="_blank" href="https://github.com/afoim/fuwari/tree/main/src/data/friends" class="transition link text-[var(--primary)] font-medium underline">请点击这里提交</a>
            </p>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            {friends.map((friend) => (
                <a href={friend.url} target="_blank" class="friend-card">
                    <div class="flex items-center gap-2">
                        <div class="relative w-5 h-5 rounded overflow-hidden" style={`--theme-hue: ${siteConfig.themeColor.hue}`}>
                            <div class="loading-bar absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-32 h-1 bg-gray-200 dark:bg-gray-700 z-10 rounded-full overflow-hidden">
                                <div class="loading-progress h-full w-8 bg-[oklch(0.70_0.14_var(--theme-hue))] animate-loading-progress rounded-full"></div>
                            </div>
                            <img src={friend.avatar} loading="lazy" class="w-full h-full object-cover opacity-0 transition-opacity duration-500" alt={`${friend.name}的头像`} onload="this.style.opacity='1'; this.parentElement.querySelector('.loading-bar').style.opacity='0';"/>
                        </div>
                        <div class="font-bold text-black dark:text-white">{friend.name}</div>
                    </div>
                    <div class="text-sm text-black/50 dark:text-white/50">{friend.description}</div>
                </a>
            ))}
        </div>



</MainGridLayout>

<style>
    .friend-card {
        @apply flex flex-col gap-1 p-4 rounded-lg bg-[var(--card-bg)] border border-black/10 dark:border-white/10 hover:border-black/20 dark:hover:border-white/20 hover:bg-black/5 dark:hover:bg-white/5;
        transition-property: all;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 0.15s;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
    
    .friend-card:active {
        scale: .98;
        background-color: var(--btn-regular-bg-active);
    }
    
    .friend-card:hover {
        background-color: var(--btn-regular-bg-hover);
    }
    
    .friend-card:hover .font-bold {
        color: var(--btn-content);
    }
    
    .friend-card:hover .text-sm {
    @apply text-gray-700 dark:text-white;
    }

    .friend-card .font-bold,
    .friend-card .text-sm {
        transition-property: color;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 0.15s;
    }

    .loading-bar {
        transition: opacity 0.5s ease-out;
    }

    @keyframes loading-progress {
        0% {
            transform: translateX(-100%);
        }
        100% {
            transform: translateX(400%);
        }
    }

    .animate-loading-progress {
        animation: loading-progress 1.5s ease-in-out infinite;
    }
</style>
