IconSocial icon

---
interface SocialLink {
  platform: string;
  href: string;
  icon: string;
  followers?: string;
}

interface Props {
  links?: SocialLink[];
  title?: string;
  showFollowers?: boolean;
}

const {
  links = [
    { platform: 'LinkedIn', href: '#', icon: '💼', followers: '12.4K' },
    { platform: 'Instagram', href: '#', icon: '📸', followers: '8.2K' },
    { platform: 'YouTube', href: '#', icon: '▶️', followers: '3.1K' },
    { platform: 'X / Twitter', href: '#', icon: '𝕏', followers: '2.8K' },
    { platform: 'TikTok', href: '#', icon: '🎵', followers: '5.5K' },
  ],
  title = 'Volg ons',
  showFollowers = true,
} = Astro.props;
---

<div class="isc">
  {title && <p class="isc__title">{title}</p>}
  <div class="isc__links">
    {links.map((l) => (
      <a class="isc__link" href={l.href} aria-label={`Volg ons op ${l.platform}`} target="_blank" rel="noopener">
        <span class="isc__icon" aria-hidden="true">{l.icon}</span>
        {showFollowers && (
          <div class="isc__meta">
            <span class="isc__platform">{l.platform}</span>
            {l.followers && <span class="isc__followers">{l.followers}</span>}
          </div>
        )}
      </a>
    ))}
  </div>
</div>

<style>
  :root {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
  }
  .isc__title {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #999;
    margin: 0 0 1rem;
  }
  .isc__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  .isc__link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1rem;
    background: #f5f5f5;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.15s, transform 0.15s;
  }
  .isc__link:hover {
    background: #ededfd;
    transform: translateY(-2px);
  }
  .isc__icon { font-size: 1.1rem; }
  .isc__meta { display: flex; flex-direction: column; }
  .isc__platform {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-primary, #0a0a0a);
    line-height: 1;
  }
  .isc__followers {
    font-size: 0.72rem;
    color: #999;
  }
</style>