---
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://mathemann.ddns.net/turtle_game/',
        iconClass: 'iconify-[heroicons--globe-alt-solid]'
      }
    ]
  },
  {
    name: 'Hanad',
    nickname: 'Voldemort2212',
    roles: ['Support', 'Mediengestaltung']
  }
];
---

<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>