---
interface Props {
  type?: 'note' | 'pattern' | 'antipattern' | 'warning' | 'tip';
}

const { type = 'note' } = Astro.props;

const config: Record<string, { borderColor: string; labelColor: string; label: string }> = {
  note: { borderColor: 'var(--border-default)', labelColor: 'var(--text-secondary)', label: 'Note' },
  pattern: { borderColor: 'var(--accent-primary)', labelColor: 'var(--accent-primary)', label: 'Pattern' },
  antipattern: { borderColor: 'var(--error-border)', labelColor: 'var(--error-text)', label: 'Anti-pattern' },
  warning: { borderColor: 'var(--warning-border)', labelColor: 'var(--warning-text)', label: 'Warning' },
  tip: { borderColor: 'var(--accent-secondary)', labelColor: 'var(--accent-secondary)', label: 'Tip' },
};

const { borderColor, labelColor, label } = config[type];
---

<aside class="callout" role="note" aria-label={`${label} callout`} style={`border-left-color: ${borderColor};`}>
  <span class="callout-label" aria-hidden="true" style={`color: ${labelColor};`}>{label}</span>
  <div class="callout-body"><slot /></div>
</aside>

<style>
  .callout {
    max-width: var(--width-prose);
    background-color: var(--surface-inset);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid;
    border-radius: var(--rounded-lg);
    padding: var(--space-3);
    margin-top: var(--space-4);
    margin-bottom: var(--space-4);
  }

  .callout-label {
    display: block;
    font-family: var(--font-structure);
    font-size: var(--type-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: var(--leading-normal);
    margin-bottom: var(--space-1);
  }

  .callout-body {
    font-family: var(--font-prose);
    font-size: var(--type-base);
    font-weight: 400;
    line-height: var(--leading-prose);
    color: var(--text-primary);
  }

  .callout-body :global(p) {
    margin-bottom: var(--space-3);
  }

  .callout-body :global(p:last-child) {
    margin-bottom: 0;
  }
</style>