---
import Breadcrumbs from '@/components/Breadcrumbs.astro'
import MemberCard from '@/components/MemberCard.astro'
import PageHead from '@/components/PageHead.astro'
import Layout from '@/layouts/Layout.astro'
import { getAllMembers } from '@/lib/data-utils'

const members = (await getAllMembers()).sort((a, b) =>
  a.data.name.localeCompare(b.data.name),
)
---

<Layout class="max-w-4xl">
  <PageHead slot="head" title="Members" />

  <Breadcrumbs items={[{ label: 'Members', icon: 'lucide:users' }]} />
  <div class="border-border text-muted-foreground prose rounded-2xl border p-4">
    <strong>Viewer discretion advised.</strong>
    <br /> Members have the freedom to customise their profiles. Some of us actually
    exercise it.
    <br />
    <br class="md:hidden" />

    Open a pull request <a
      href="https://codeberg.org/fosscet/website-src/"
      class="link"
    >
      on the repo
    </a> to add your profile.
  </div>
  {
    members.length > 0 ? (
      <div class="flex flex-wrap justify-center gap-4">
        {members.map((member) => (
          <MemberCard member={member} />
        ))}
      </div>
    ) : (
      <p class="text-muted-foreground text-center">No members found.</p>
    )
  }
</Layout>