---
import type { Member } from '../lib/atproto/home';
import { useTranslations, type Lang } from '../i18n/ui';

interface Props {
  member: Member;
  lang?: Lang;
}

const { member, lang = 'en' } = Astro.props;
const t = useTranslations(lang);
const profileUrl = `https://mu.social/profile/${member.handle}`;

const role = member.sifa?.title;
const company = member.sifa?.company;
const location = member.sifa?.location;
const apps = member.sifa?.apps;
const hasSifa = Boolean(role || company || location || apps?.length);
const sifaUrl = `https://sifa.id/p/${member.handle}`;
---

<article class="member-card">
  {
    member.avatar && (
      <img class="member-avatar" src={member.avatar} alt="" width="48" height="48" loading="lazy" />
    )
  }
  <div class="member-body">
    <p class="member-name">{member.displayName ?? member.handle}</p>
    <p class="member-handle" title={`@${member.handle}`}>@{member.handle}</p>

    {
      hasSifa ? (
        <>
          {/* Title only, never the Sifa-derived company: members volunteer here as individuals
              and do not necessarily represent their employer. */}
          {role && <p class="member-role">{role}</p>}
          {location && <p class="member-loc">{location}</p>}
          {
            apps?.length && (
              <>
                <p class="apps-label">{t('card.activeOn')}</p>
                <div class="member-apps">
                  {apps.map((a) => (
                    <span class="app-chip" title={a.category}>{a.name}</span>
                  ))}
                </div>
              </>
            )
          }
        </>
      ) : (
        member.description && <p class="member-bio">{member.description}</p>
      )
    }

    <div class="member-links">
      {hasSifa && <a class="member-link" href={sifaUrl} rel="noopener">Sifa</a>}
      <a class="member-link" href={profileUrl} rel="noopener">Bluesky</a>
      <button
        class="follow-btn"
        type="button"
        data-did={member.did}
        data-profile-url={profileUrl}
        aria-pressed="false"
        hidden>Follow</button>
    </div>
  </div>
</article>