ImageRound image

---
/**
 * ImageRound
 * Ronde afbeelding met optionele naam en functie — geschikt als avatar/persoon-blok.
 *
 * Props:
 * - src?: string                 afbeelding-URL (laat weg voor placeholder)
 * - alt?: string                 alt-tekst
 * - name?: string                naam onder de afbeelding
 * - role?: string                functie/rol onder de naam
 * - size?: 'sm' | 'md' | 'lg'   diameter: 120 / 200 / 280px, default 'md'
 * - ringColor?: string           CSS-kleurwaarde voor de ring, default #6366f1
 * - theme?: 'light' | 'dark'    achtergrond-mode, default 'light'
 */
interface Props {
  src?: string;
  alt?: string;
  name?: string;
  role?: string;
  size?: 'sm' | 'md' | 'lg';
  ringColor?: string;
  theme?: 'light' | 'dark';
}

const {
  src,
  alt = '',
  name,
  role,
  size = 'md',
  ringColor = '#6366f1',
  theme = 'light',
} = Astro.props;

const sizeMap = { sm: '120px', md: '200px', lg: '280px' };
const diameter = sizeMap[size];
---

<section class:list={['bl-section', 'ird', `ird--${theme}`]}>
  <div class="bl-inner ird-inner">
    <figure class="ird-figure" style={`--ird-size: ${diameter}; --ird-ring: ${ringColor}`}>
      <div class="ird-circle">
        {src
          ? <img src={src} alt={alt} class="ird-img" loading="lazy" decoding="async" />
          : <div class="ird-placeholder" aria-label={alt || 'Ronde afbeelding'}></div>
        }
      </div>
      {(name || role) && (
        <figcaption class="ird-caption">
          {name && <strong class="ird-name">{name}</strong>}
          {role && <span class="ird-role">{role}</span>}
        </figcaption>
      )}
    </figure>
  </div>
</section>

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

  .ird-inner { display: flex; justify-content: center; }

  .ird-figure {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin: 0;
  }

  .ird-circle {
    width: var(--ird-size, 200px);
    height: var(--ird-size, 200px);
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid var(--ird-ring, #6366f1);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--ird-ring, #6366f1) 15%, transparent);
    flex-shrink: 0;
  }

  .ird-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .ird-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #d0d0f0, #b0b0e0);
  }

  .ird-caption {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    text-align: center;
  }

  .ird-name {
    font-size: 1rem;
    font-weight: 700;
    color: inherit;
  }

  .ird-role {
    font-size: .875rem;
    color: var(--color-muted, #6b7280);
  }

  .ird--dark .ird-role { color: #aaa; }
</style>