---
/**
 * DecoOrb — decorative parallax blur orb for section backgrounds.
 * Pure decoration, never blocks clicks, always behind content.
 *
 * Props:
 *   color:    'yellow' | 'soft' | 'purple' | 'mint' | 'teal' (default 'yellow')
 *   size:     CSS dimension (default '400px')
 *   speed:    parallax speed 0.0–1.0 (default 0.4)
 *   position: { top?, right?, bottom?, left? } CSS positions
 *   blur:     CSS blur value (default '60px')
 *   opacity:  CSS opacity 0–1 (default 0.5)
 *
 * Example:
 *   <DecoOrb color="yellow" size="500px" speed={0.4} position={{ top: '-100px', left: '-100px' }} />
 */

interface Props {
  color?: 'yellow' | 'soft' | 'purple' | 'mint' | 'teal';
  size?: string;
  speed?: number;
  position?: { top?: string; right?: string; bottom?: string; left?: string };
  blur?: string;
  opacity?: number;
}

const {
  color = 'yellow',
  size = '400px',
  speed = 0.4,
  position = {},
  blur = '60px',
  opacity = 0.5,
} = Astro.props;

const styleStr = [
  `width: ${size};`,
  `height: ${size};`,
  `filter: blur(${blur});`,
  `opacity: ${opacity};`,
  position.top ? `top: ${position.top};` : '',
  position.right ? `right: ${position.right};` : '',
  position.bottom ? `bottom: ${position.bottom};` : '',
  position.left ? `left: ${position.left};` : '',
].join(' ');
---

<div
  class:list={['deco-orb', `orb-${color}`]}
  data-parallax-speed={speed}
  style={styleStr}
  aria-hidden="true"
></div>

<style>
  .deco-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    will-change: transform;
  }
  .orb-yellow { background: radial-gradient(circle, var(--color-primary) 0%, transparent 70%); }
  .orb-soft { background: radial-gradient(circle, var(--color-primary-soft) 0%, transparent 70%); }
  .orb-purple { background: radial-gradient(circle, var(--color-purple) 0%, transparent 70%); }
  .orb-mint { background: radial-gradient(circle, var(--color-mint) 0%, transparent 70%); }
  .orb-teal { background: radial-gradient(circle, var(--color-teal) 0%, transparent 70%); }
</style>
