TextCallout text

---
interface Props {
  type?: 'info' | 'warning' | 'success' | 'tip';
  title?: string;
  body: string;
}
const { type = 'info', title, body = "Tip: Begin altijd met een nauwkeurige meting van je huidige baseline voordat je een nieuw advertentiebudget inzet. Zo weet je exact wat de impact is van jouw investering." } = Astro.props;

const icons = { info: 'ℹ', warning: '⚠', success: '✓', tip: '💡' };
---

<div class={`tx-callout tx-callout--${type}`}>
  <span class="tx-callout__icon" aria-hidden="true">{icons[type]}</span>
  <div>
    {title && <strong class="tx-callout__title">{title}</strong>}
    <p class="tx-callout__body">{body}</p>
  </div>
</div>

<style>
  :root {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
  }
  .tx-callout {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    padding: 1rem 1.25rem;
    border-radius: 0.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: rgba(99,102,241,0.06); border-color: rgba(99,102,241,0.2); }
  .tx-callout__icon {
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
  }
  .tx-callout__title {
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 0.2rem;
  }
  .tx-callout__body {
    margin: 0;
    font-size: 0.875rem;
    color: #444;
    line-height: 1.6;
  }
</style>