---
import { Icon } from '@astrojs/starlight/components';

interface Props {
  name: string;
  twitter?: string;
  linkedin?: string;
  github?: string;
  youtube?: string;
  labels?: Record<string, string>;
}

const { name, twitter, linkedin, github, youtube, data } = Astro.props;
---

<p class="author">
  {data['author.createdBy']} {name}
  {twitter && <a href={twitter}>
    <Icon class="icon" name="twitter" size="0.75rem" />
  </a>}
  {linkedin && <a href={linkedin}>
    <Icon class="icon" name="linkedin" size="0.75rem" />
  </a>}
  {github && <a href={github}>
    <Icon class="icon" name="github" size="0.75rem" />
  </a>}
  {youtube && <a href={youtube}>
    <Icon class="icon" name="youtube" size="0.75rem" />
  </a>}

</p>

<style>
  .author {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    font-size: var(--sl-text-xs);
    color: var(--sl-color-gray-3);
    width: max-content;
  }

  .icon {
    vertical-align: middle;
    color: var(--sl-color-gray-3);

    &:hover {
      color: var(--sl-color-accent-high)
    }
  }
</style>
