/* ─────────────────────────────────────────────────────────────
   Divider · zentrierter Trenner mit optionalem Ornament
   Varianten:
   - "sprig"        (Default) Ornament-Sprig + zwei feine Linien
   - "sprig-small"  kleineres Sprig
   - "rose"         Rosen-Ornament (Markenmotiv)
   - "branch"       großer Zweig
   - "rule"         nur die zwei Linien, ohne Icon
   Props:
   - variant (s.o.)
   - color  – Tokenname oder CSS-Farbe, default "var(--brand-accent)"
   - lineWidth – px pro Linie, default 60
   - height – px Icon-Höhe, default 36
   - gap – px zwischen Icon und Linien, default 14
   - marginBottom – px, default 18 (Section-Spacing)
   ───────────────────────────────────────────────────────────── */

const DIVIDER_ASSETS = {
  'sprig':       { src:window._r('assets/ornament-sprig.png'),       h:36 },
  'sprig-small': { src:window._r('assets/ornament-sprig-small.png'), h:28 },
  'rose':        { src:window._r('assets/ornament-rose.png'),        h:44 },
  'branch':      { src:window._r('assets/ornament-branch-large.png'),h:42 },
};

function Divider({
  variant      = 'sprig',
  color        = 'var(--brand-accent)',
  lineWidth    = 60,
  height,
  gap          = 14,
  marginBottom = 18,
}) {
  const asset = DIVIDER_ASSETS[variant];
  const iconH = height ?? (asset ? asset.h : 0);

  return (
    <div style={{
      display:'flex', alignItems:'center', justifyContent:'center',
      gap, marginBottom, color,
    }}>
      <span style={{height:1, width:lineWidth, background:color, opacity:.5}}/>
      {variant !== 'rule' && asset && (
        <img src={asset.src} alt="" style={{height:iconH, width:'auto'}}/>
      )}
      <span style={{height:1, width:lineWidth, background:color, opacity:.5}}/>
    </div>
  );
}

// Backwards-compat: OrnamentRow ist der vormalige Name.
const OrnamentRow = (props) => <Divider {...props}/>;

Object.assign(window, { Divider, OrnamentRow });