ImageRound image

---
interface Props {
  src?: string;
  alt?: string;
  size?: string;
  ringColor?: string;
  caption?: string;
}

const {
  src = '',
  alt = 'Ronde afbeelding',
  size = '200px',
  ringColor = '#6366f1',
  caption = '',
} = Astro.props;
---

<figure class="ird" style={`--ird-size: ${size}; --ird-ring: ${ringColor}`}>
  <div class="ird__circle">
    {src ? (
      <img class="ird__img" src={src} alt={alt} />
    ) : (
      <div class="ird__placeholder" aria-label={alt}></div>
    )}
  </div>
  {caption && <figcaption class="ird__caption">{caption}</figcaption>}
</figure>

<style>
  :root {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
  }
  .ird {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    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 rgba(99,102,241,0.15);
  }
  .ird__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .ird__placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #d0d0f0 0%, #b0b0e0 100%);
  }
  .ird__caption {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-primary, #0a0a0a);
    text-align: center;
  }
</style>