---
import Breadcrumbs from '@/components/Breadcrumbs.astro'
import Link from '@/components/Link.astro'
import PageHead from '@/components/PageHead.astro'
import Layout from '@/layouts/Layout.astro'
import {
  getFriendLinks,
  type LinkEntry,
} from '@/lib/data-utils'
import Comment from '@/components/Comment.astro'
const placeholderAvatar = '/avatar-placeholder.svg'
const visibleLinks = await getFriendLinks()
---

<Layout class="max-w-3xl">
  <PageHead slot="head" title="Friends" />
  <Breadcrumbs items={[{ label: 'Friends', icon: 'lucide:users' }]} />

  <section class="rounded-lg border p-6">
    <div class="flex flex-col gap-2">
      <h1 class="text-2xl font-semibold">友链 / Friends</h1>
      <p class="text-muted-foreground text-sm">
        这里收集一些朋友和有趣的网站
      </p>
    </div>
  </section>

  <section class="grid gap-4">
    {
      visibleLinks.map((friend) => (
        <article class="rounded-lg border p-4 transition hover:border-primary/60">
          <div class="flex items-start gap-3">
            {
              friend.picLink ? (
                <img
                  src={friend.picLink}
                  alt={friend.name}
                  loading="lazy"
                  class="h-12 w-12 rounded-full border object-cover"
                  width="48"
                  height="48"
                  onerror={`this.onerror=null;this.src='${placeholderAvatar}';`}
                />
              ) : (
                <img
                  src={placeholderAvatar}
                  alt="avatar placeholder"
                  loading="lazy"
                  class="h-12 w-12 rounded-full border object-cover"
                  width="48"
                  height="48"
                />
              )
            }
            <div class="flex-1 space-y-1">
              <div class="flex items-center justify-between gap-3">
                <h2 class="text-lg font-semibold leading-tight">
                  <Link href={friend.links} external underline>
                    {friend.name}
                  </Link>
                </h2>
              </div>
              <p class="text-sm text-muted-foreground">
                {friend.Description || '你来到了知识的荒原'}
              </p>
            </div>
          </div>
        </article>
      ))
    }
  </section>

  <section class="rounded-lg border p-6">
    <h3 class="text-lg font-semibold">申请方式</h3>
    <p class="text-sm text-muted-foreground mt-2">
      请提供站点名称、链接、一句话介绍。
    </p>
    <pre class="mt-3 whitespace-pre-wrap break-words rounded-md bg-muted/50 p-3 text-xs text-muted-foreground">
name: 溴化锂的笔记本
link: https://nvme0n1p.dev
avatar: https://gravatar.com/avatar/29d64df3ca2a9dac5a7fffa5372fb80fb3270ceb223de2af0c33cdc4b2cbe954?v=1687917579000&size=256&d=initials
description: 醉后不知天在水，满船清梦压星河。
    </pre>
    <Comment />
  </section>
</Layout>
