---
import githubIcon from "../assets/img/github.png";

interface Props {
    name: string;
    url?: string;
    githubUrl: string;
    avatarUrl: string;
    tag?: string;
}

const { name, githubUrl, url = githubUrl, avatarUrl, tag } = Astro.props;
---

<div class="friend">
    <a rel="noopener noreferrer" href={url}>
        <img
            class="friend-avatar"
            alt={`Friend ${name}'s avatar`}
            src={avatarUrl}
            width="80"
            height="80"
        /><br />{name}</a
    >
    <a rel="noopener noreferrer" href={githubUrl}>
        <img class="friend-github" src={githubIcon.src} />
    </a><br />
    {tag && <span class="friend-tag">{tag}</span>}
</div>

<style>
.friend a {
  font-family: unset;
}

.friend-avatar {
  object-fit: cover;
}

.friend-github {
  width: 1em;
  vertical-align: middle;
  margin-right: -0.5em;
}

.friend-tag {
  font-size: 0.8em;
}
</style>