/* global React */
function Eyebrow({ children, color = '#8A9A7B', style }) {
  return (
    <div style={{
      fontFamily: "'Mulish', sans-serif",
      fontSize: 12,
      fontWeight: 500,
      letterSpacing: '0.18em',
      textTransform: 'uppercase',
      color,
      ...style,
    }}>{children}</div>
  );
}

function SectionDivider({ withSprig = false, marginY = 64 }) {
  if (withSprig) {
    return (
      <div style={{ display: 'flex', alignItems: 'center', gap: 16, margin: `${marginY}px 0` }}>
        <div style={{ flex: 1, height: 1, background: '#8A9A7B' }} />
        <img src="assets/sprig-divider.svg" width="180" alt="" />
        <div style={{ flex: 1, height: 1, background: '#8A9A7B' }} />
      </div>
    );
  }
  return <hr style={{ border: 0, height: 1, background: '#8A9A7B', margin: `${marginY}px 0` }} />;
}

function PullQuote({ children, attribution }) {
  return (
    <figure style={{ margin: '0 auto', maxWidth: 720, textAlign: 'center', padding: '24px 16px' }}>
      <Eyebrow>A word from the chair</Eyebrow>
      <blockquote style={{
        margin: '20px 0 0',
        fontFamily: "'Cormorant Garamond', serif",
        fontStyle: 'italic',
        fontWeight: 400,
        fontSize: 32,
        lineHeight: 1.35,
        color: '#3D2F22',
        textWrap: 'balance',
      }}>
        "{children}"
      </blockquote>
      {attribution && (
        <figcaption style={{
          marginTop: 18,
          fontFamily: "'Caveat', cursive",
          fontSize: 26,
          color: '#B5654A',
        }}>{attribution}</figcaption>
      )}
    </figure>
  );
}

window.GFH_Eyebrow = Eyebrow;
window.GFH_SectionDivider = SectionDivider;
window.GFH_PullQuote = PullQuote;