---
import Avatar, { type AvatarSource } from "../Avatar.astro";
import BlueskyIcon from "./icons/BlueskyIcon.astro";

interface Props {
  name: string;
  handle: string;
  location: string;
  description?: string;
  bluesky?: string;
  website?: string;
  avatar: AvatarSource;
}

const { name, location, bluesky, website, avatar } = Astro.props;
const href = bluesky ?? website;
const Tag = href ? "a" : "div";
---

<Tag
  class:list={["community-pill", { "community-pill--link": Boolean(href) }]}
  {...(href ? { href, rel: "noopener noreferrer", target: "_blank", "aria-label": `${name}${bluesky ? " on Bluesky" : ""}` } : {})}
>
  <Avatar
    avatar={avatar}
    size={28}
    imgClass="community-pill__avatar"
    fallbackClass="community-pill__dot"
  />
  <div class="community-pill__text">
    <span class="community-pill__name">{name}</span>
    <span class="community-pill__location">{location}</span>
  </div>
  {bluesky && (
    <span class="community-pill__icon" aria-hidden="true">
      <BlueskyIcon />
    </span>
  )}
</Tag>

<style>
  .community-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-pill);
    padding: var(--space-xs) var(--space-md) var(--space-xs) var(--space-xs);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s ease, transform 0.15s ease, background-color 0.15s ease;
  }

  .community-pill--link:hover {
    border-color: var(--primary);
    background: var(--card);
  }

  .community-pill--link:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
  }

  .community-pill :global(.community-pill__avatar) {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
  }

  .community-pill :global(.community-pill__dot) {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: oklch(98% 0 0);
    font-size: 8px;
    font-weight: 700;
    font-family: var(--font-body);
    letter-spacing: 0.02em;
  }

  .community-pill__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .community-pill__name {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--card-foreground);
    line-height: 1.2;
    white-space: nowrap;
  }

  .community-pill__location {
    font-size: 9px;
    color: var(--foreground-muted);
    line-height: 1.2;
  }

  .community-pill__icon {
    flex-shrink: 0;
    color: var(--primary);
    display: flex;
  }
  .community-pill--link:hover .community-pill__icon {
    color: var(--primary-hover);
  }
</style>