Divider with Text

---
/**
 * SectionDividerText — A text-based section divider with decorative lines on each side.
 *
 * Displays uppercase text centered between two horizontal lines. Ideal for separating
 * content sections on landing pages or documentation pages.
 *
 * @param {string} color - Text and line color using CSS color value. Default: 'var(--c-text-3)'.
 * @param {string} fontSize - Size of the divider text. Default: '0.75rem'.
 *
 * @example
 * ```astro
 * <SectionDividerText>Features</SectionDividerText>
 * ```
 */
interface Props {
  color?: string;
  fontSize?: string;
}

const { color = 'var(--c-text-3)', fontSize = '0.75rem' } = Astro.props;
---

<div class="section-divider" style={`--divider-color: ${color}; --divider-font-size: ${fontSize}`}>
  <span><slot /></span>
</div>

<style>
  .section-divider {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    color: var(--divider-color, var(--c-text-3));
    font-size: var(--divider-font-size, 0.75rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: var(--sp-6) 0;
  }
  .section-divider::before,
  .section-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--c-border);
  }
</style>