/* global React */
// Discipline mandalas — real SVG assets provided by the designer.

const DISCIPLINE_SVG_SRC = {
  TAROT: 'assets/disciplines/tarot.svg',
  NUMEROLOGIA: 'assets/disciplines/numerologia.svg',
  ASTROLOGIA: 'assets/disciplines/astrologia.svg',
  RUNY: 'assets/disciplines/runy.svg',
  CHIROLOGIA: 'assets/disciplines/chirologia.svg',
};

function DisciplineIllustration({ tag }) {
  const src = DISCIPLINE_SVG_SRC[tag] || DISCIPLINE_SVG_SRC.TAROT;
  return (
    <div style={{
      width: 384, height: 384,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      position: 'relative',
    }}>
      <img src={src} alt={tag}
        style={{ width: '100%', height: '100%', objectFit: 'contain' }} />
    </div>
  );
}

Object.assign(window, { DisciplineIllustration });