---
import WebsiteLayout from '@layouts/website/WebsiteLayout.astro';

const team = [
  {
    name: 'Elias',
    nickname: 'MineTec',
    roles: ['Gründer', 'Support', 'Organisation', 'Softwareentwicklung'],
    links: [{ name: 'Website', href: 'https://mhsl.eu/aboutme/', iconClass: 'iconify-[heroicons--globe-alt-solid]' }]
  },
  {
    name: 'Jannik',
    nickname: 'Goldi187',
    roles: ['Support', 'Organisation']
  },
  {
    name: 'Adrian',
    nickname: 'h0nny27',
    roles: ['Support']
  },
  {
    name: 'Ruben',
    nickname: 'bytedream',
    roles: ['Softwareentwicklung'],
    links: [{ name: 'Website', href: 'https://bytedream.dev', iconClass: 'iconify-[heroicons--globe-alt-solid]' }]
  },
  {
    name: 'Lars',
    nickname: '28Pupsi28',
    roles: ['Softwareentwicklung'],
    links: [{ name: 'Website', href: 'https://l-neuhaus.de/', iconClass: 'iconify-[heroicons--globe-alt-solid]' }]
  },
  {
    name: 'Hanad',
    nickname: 'Hannibal2212',
    roles: ['Support', 'Mediengestaltung'],
    links: [{ name: 'Website', href: 'https://ddisk.sytes.net/', iconClass: 'iconify-[heroicons--globe-alt-solid]' }]
  },
  {
    name: 'Jannis',
    nickname: 'jannis_mg',
    roles: ['Softwareentwicklung']
  },
  {
    name: 'Hannes',
    nickname: 'bulldogenhase',
    roles: ['Support']
  },
  {
    name: 'David',
    nickname: 'Besiece',
    roles: ['Softwareentwicklung']
  }
];
---

<WebsiteLayout title="Team">
  <div class="m-auto flex flex-col justify-center items-center px-4 py-6 2xl:px-48 sm:py-12">
    <h1 class="text-5xl mb-10">Die Admins</h1>
    <div class="grid md:grid-cols-2 xl:grid-cols-3 gap-4 my-4 justify-center">
      {team.map((member) => (
        <div class="card max-w-96 bg-base-200">
          <div class="card-body px-4 py-6">
            <div class="relative flex flex-col items-center">
              <div class="avatar placeholder mb-2">
                <div class="bg-neutral text-neutral-content w-24 rounded-xl">
                  <img
                    class="m-[7.5px]"
                    style="width: 85%; height: 85%"
                    src={`https://mc-heads.net/head/${member.nickname.toLowerCase()}`}
                    alt={member.name}
                  />
                </div>
              </div>
              <p class="text-center text-lg mb-1">
                {member.name} · {member.nickname}
              </p>
              <p class="text-center text-sm font-light">{member.roles.join(' · ')}</p>
              {member.links && (
                <div class="absolute top-0 right-2 h-24 flex">
                  <div class="divider divider-horizontal mx-2" />
                  <div class="flex items-center">
                    {member.links.map((link) => (
                      <a
                        class="flex w-9 h-9 justify-center items-center border rounded-full border-base-content"
                        href={link.href}
                        target="_blank"
                        title={link.name}
                      >
                        <span class="iconify size-[22px]" class:list={[link.iconClass]} />
                      </a>
                    ))}
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      ))}
    </div>
  </div>
</WebsiteLayout>