ContentCallout content

---
interface Props {
  type?: "info" | "success" | "warning" | "tip";
  icon?: string;
  title?: string;
  text: string;
}

const typeConfig = {
  info: { bg: "#eff6ff", border: "#3b82f6", iconDefault: "💡" },
  success: { bg: "#f0fdf4", border: "#22c55e", iconDefault: "✅" },
  warning: { bg: "#fffbeb", border: "#f59e0b", iconDefault: "⚠️" },
  tip: { bg: "#faf5ff", border: "#a855f7", iconDefault: "🎯" },
};

const {
  type = "tip",
  icon,
  title = "Pro tip van BLURR",
  text = "Combineer Google Ads met organische SEO voor het sterkste resultaat. Betaalde kanalen brengen direct verkeer, terwijl SEO op de lange termijn je domeinautoriteit opbouwt.",
} = Astro.props;

const config = typeConfig[type];
const displayIcon = icon ?? config.iconDefault;
---

<div class="cco-wrap" style={`--cco-bg: ${config.bg}; --cco-border: ${config.border}`}>
  <div class="cco-icon" aria-hidden="true">{displayIcon}</div>
  <div class="cco-body">
    {title && <strong class="cco-title">{title}</strong>}
    <p class="cco-text">{text}</p>
  </div>
</div>

<style>
  .cco-wrap {
    display: flex;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: var(--cco-bg, #faf5ff);
    border-left: 4px solid var(--cco-border, #a855f7);
    border-radius: 0 8px 8px 0;
    margin: 2rem 0;
  }
  .cco-icon {
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 0.1rem;
  }
  .cco-body {
    flex: 1;
  }
  .cco-title {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-primary, #0a0a0a);
    margin-bottom: 0.35rem;
  }
  .cco-text {
    font-size: 0.95rem;
    line-height: 1.65;
    color: #444;
    margin: 0;
  }
</style>