---
import { Icon } from 'astro-icon/components';

interface Props {
  members: string[];
}

const { members } = Astro.props;

const owner = "amr";
const admins = ["raf", "rocoe"];
---

<div class="section">
  <p>Members</p>
  <ul class="members">
    {members.length > 0 ? (
      members.map(username => (
        <li>
          <a href={`/~${username}`}>~{username}</a>
          {username === owner && (
            <Icon name="fa-solid:crown" class="member-icon owner" title="Owner" />
          )}
          {admins.includes(username) && username !== owner && (
            <Icon name="fa-solid:shield-halved" class="member-icon admin" title="Admin" />
          )}
        </li>
      ))
    ) : (
      <li class="error">Error fetching members!</li>
    )}
  </ul>
</div>