// Blob primitive: a rounded-rect positioned as % of canvas, filled with a
// color, containing a centered organ glyph + scattered decorative marks.

function Blob({ blob, organContent, focused }) {
  const { x, y, w, h, r, color, decor = [] } = blob;

  return (
    <div
      data-blob-id={blob.id}
      style={{
        position: 'absolute',
        left: `${x}%`,
        top: `${y}%`,
        width: `${w}%`,
        height: `${h}%`,
        background: color,
        borderRadius: r,
        color: 'var(--on-accent)',
        overflow: 'hidden',
        transition: 'transform 600ms cubic-bezier(.2,.8,.2,1), filter 400ms ease',
        transform: focused ? 'scale(1.015)' : 'scale(1)',
        filter: focused ? 'brightness(1.04)' : 'none',
        boxShadow: focused ? '0 16px 50px -16px rgba(0,0,0,0.25)' : 'none',
        zIndex: focused ? 5 : 1,
      }}
    >
      {/* decor marks */}
      {decor.map((d, i) => {
        const MarkComp = window.Marks[d.mark];
        if (!MarkComp) return null;
        return (
          <div key={i} style={{
            position: 'absolute',
            left: `${d.at[0]}%`,
            top: `${d.at[1]}%`,
            transform: `translate(-50%, -50%) rotate(${d.rot || 0}deg)`,
            pointerEvents: 'none',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: 'var(--on-accent)',
          }}>
            <MarkComp {...(d.props || {})} />
          </div>
        );
      })}

      {/* organ glyph centered */}
      {organContent && (
        <div style={{
          position: 'absolute', inset: 0,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: 'var(--on-accent)',
        }}>
          {organContent}
        </div>
      )}
    </div>
  );
}

window.Blob = Blob;