TextCallout text

---
/**
 * TextCallout — geaccentueerd tekstblok (tip, info, waarschuwing, succes).
 *
 * Props:
 * - title?: string
 * - body: string
 * - variant?: 'tip' | 'info' | 'warning' | 'success'
 */
interface Props {
  title?: string;
  body?: string;
  variant?: 'tip' | 'info' | 'warning' | 'success';
}
const {
  title = 'Goed om te weten',
  body = 'Een korte toelichting of aandachtspunt dat je hier wilt benadrukken.',
  variant = 'tip',
} = Astro.props;
---

<section class="bl-section tx-callout-section">
  <div class="bl-inner bl-inner--narrow">
    <div class={`tx-callout tx-callout--${variant}`}>
      <span class="tx-callout__icon" aria-hidden="true">
        <svg width="18" height="18" viewBox="0 0 16 16" fill="none">
          <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </span>
      <div>
        {title && <strong class="tx-callout__title">{title}</strong>}
        <p class="tx-callout__body">{body}</p>
      </div>
    </div>
  </div>
</section>

<style>
.tx-callout{display:flex;gap:.85rem;align-items:flex-start;padding:1rem 1.25rem;border-radius:.6rem;border:1px solid transparent}
.tx-callout--info{background:#eff6ff;border-color:#bfdbfe}
.tx-callout--warning{background:#fffbeb;border-color:#fde68a}
.tx-callout--success{background:#f0fdf4;border-color:#bbf7d0}
.tx-callout--tip{background:#6366f10f;border-color:#6366f133}
.tx-callout__icon{flex-shrink:0;margin-top:.15rem;color:var(--color-accent, #6366f1);display:inline-flex}
.tx-callout__title{display:block;font-size:1rem;font-weight:700;color:var(--color-primary, #0a0a0a);margin-bottom:.2rem}
.tx-callout__body{margin:0;font-size:1rem;color:#374151;line-height:1.6}
</style>