---
import { directus } from "../util"
import DirectusImg from "./DirectusImg.astro"

type Member = {
  firstname: string
  image?: string
  chairman?: boolean
}
const members = await directus<Member[]>("items/members?sort=firstname")
---

<div class="flex flex-col sm:flex-row justify-evenly gap-6">
  <div class="flex flex-col items-center">
    <span class="icon-[ph--users-three-duotone] w-[100px] h-[100px]"></span>
    <p>{members.length} Mitglieder</p>
  </div>
  <div class="flex flex-col items-center">
    <span class="icon-[ph--house-line-duotone] w-[100px] h-[100px]"></span>
    <p>1 Werkstatt</p>
  </div>
  <div class="flex flex-col items-center">
    <span class="icon-[ph--lightbulb-duotone] w-[100px] h-[100px]"></span>
    <p>&infin; Ideen</p>
  </div>
</div>

<div class="text-2xl md:text-4xl pt-8">Vorstand</div>

<div
  class="flex flex-row flex-wrap gap-6 justify-evenly sm:justify-center text-base"
>
  {
    members
      .filter((m) => m.chairman)
      .map((member) => (
        <div>
          <DirectusImg
            src={
              member.image != null
                ? member.image
                : "a8f48962-9f0e-40e6-abd2-e932aa9dea2e"
            }
            widths={[200]}
            format="webp"
            alt={"Profilbild von " + member.firstname}
            class="rounded-full w-[100px] h-[100px]"
          />

          <p>{member.firstname}</p>
        </div>
      ))
  }
</div>

<div class="text-2xl md:text-4xl pt-8">Mitglieder</div>

<div
  class="flex flex-row flex-wrap gap-6 justify-evenly sm:justify-center text-base"
>
  {
    members
      .filter((m) => !m.chairman)
      .map((member) => (
        <div>
          <DirectusImg
            src={
              member.image != null
                ? member.image
                : "a8f48962-9f0e-40e6-abd2-e932aa9dea2e"
            }
            widths={[200]}
            format="webp"
            alt={"Profilbild von " + member.firstname}
            class="rounded-full w-[100px] h-[100px]"
          />

          <p>{member.firstname}</p>
        </div>
      ))
  }

  <div>
    <div>
      <DirectusImg
        src="6920d1f2-feeb-4eb3-a066-988b3f60a6d9"
        widths={[200]}
        format="webp"
        alt="Du?"
        class="rounded-full w-[100px] h-[100px]"
      />
    </div>

    <p>Du?</p>
  </div>
</div>