IconSocial icon

---
/**
 * IconSocial
 * Rij sociale-media knoppen met icoon, platformnaam en optioneel volgersaantal.
 * Geschikt als social-proof element of footer-link set.
 *
 * Props:
 * - title?: string           klein label boven de links
 * - links: { icon?: string; platform: string; href: string; followers?: string; ariaLabel?: string }[]
 * - accentColor?: string     default '#6366f1'
 * - theme?: 'light' | 'dark'  default 'light'
 */
interface SocialLink {
  icon?: string;
  platform: string;
  href: string;
  followers?: string;
  ariaLabel?: string;
}
interface Props {
  title?: string;
  links: SocialLink[];
  accentColor?: string;
  theme?: 'light' | 'dark';
}

const { title, links, accentColor = '#6366f1', theme = 'light' } = Astro.props;
---

<section class:list={['bl-section', 'isc', `isc--${theme}`]}>
  <div class="bl-inner isc-inner" style={`--color-accent: ${accentColor}`}>
    {title && <p class="isc__title">{title}</p>}
    <div class="isc__links">
      {links.map(link => (
        <a
          class="isc__link"
          href={link.href}
          aria-label={link.ariaLabel ?? `Volg ons op ${link.platform}`}
          target="_blank"
          rel="noopener"
        >
          {link.icon && <span class="isc__icon" aria-hidden="true">{link.icon}</span>}
          <div class="isc__meta">
            <span class="isc__platform">{link.platform}</span>
            {link.followers && <span class="isc__followers">{link.followers}</span>}
          </div>
        </a>
      ))}
    </div>
  </div>
</section>

<style>
  .isc--light { background: var(--color-bg, #fff); }
  .isc--dark { background: #0a0a0a; }

  .isc__title {
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #999;
    margin: 0 0 1rem;
  }

  .isc__links {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
  }

  .isc__link {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem 1rem;
    background: #f5f5f5;
    border-radius: 8px;
    text-decoration: none;
    transition: background .15s, transform .15s;
  }
  .isc__link:hover {
    background: color-mix(in srgb, var(--color-accent) 8%, #ededfd);
    transform: translateY(-2px);
  }
  .isc--dark .isc__link { background: #1a1a1a; }
  .isc--dark .isc__link:hover {
    background: color-mix(in srgb, var(--color-accent) 12%, #1a1a1a);
  }

  .isc__icon { font-size: 1.1rem; }

  .isc__meta {
    display: flex;
    flex-direction: column;
  }

  .isc__platform {
    font-size: .875rem;
    font-weight: 600;
    color: var(--color-primary, #0a0a0a);
    line-height: 1;
  }
  .isc--dark .isc__platform { color: #e8e8e8; }

  .isc__followers {
    font-size: .75rem;
    color: #999;
  }
</style>