ContentImageCaption content

---
interface Props {
  src: string;
  alt: string;
  caption?: string;
  credit?: string;
  wide?: boolean;
}

const {
  src = "https://images.unsplash.com/photo-1552664730-d307ca884978?w=1200&q=80",
  alt = "BLURR team aan het werk in ons Amsterdamse kantoor",
  caption = "Het BLURR team werkt dagelijks aan campagnes die échte business resultaten leveren voor onze klanten.",
  credit = "Foto: BLURR Marketing",
  wide = false,
} = Astro.props;
---

<figure class={`cic-wrap${wide ? " cic-wrap--wide" : ""}`}>
  <div class="cic-img-box">
    <img class="cic-img" src={src} alt={alt} loading="lazy" />
  </div>
  {caption && (
    <figcaption class="cic-caption">
      <span class="cic-caption-text">{caption}</span>
      {credit && <span class="cic-credit">{credit}</span>}
    </figcaption>
  )}
</figure>

<style>
  .cic-wrap {
    margin: 2.5rem 0;
    max-width: 800px;
  }
  .cic-wrap--wide {
    max-width: 100%;
  }
  .cic-img-box {
    overflow: hidden;
    border-radius: 10px;
    background: #e5e5e5;
  }
  .cic-img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease;
  }
  .cic-img:hover {
    transform: scale(1.02);
  }
  .cic-caption {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #e5e5e5;
  }
  .cic-caption-text {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #555;
    flex: 1;
  }
  .cic-credit {
    font-size: 0.75rem;
    color: #999;
    white-space: nowrap;
    flex-shrink: 0;
  }
</style>